// includes style for both larry and elastic
@import "_icons";

// xgoogle_drive and xdropbox icons
#xgoogle_drive-compose-button button.btn-secondary:before { @include icon($googleDrive); }
#xdropbox-compose-button button.btn-secondary:before { @include icon($dropbox); }

.xcloud-compose-button {
    margin-top: 5px;
}

.xcloud-save-button-container {
    margin: 10px 0;
}

.xcloud-save-button-wrap {
    display: block;
    float: left;
    margin-right: 5px;
}

.xcloud-save-button {
    display: inline-block;
    position: relative;
    border: 1px solid #d0d0d0 !important;
    border-radius: 2px !important;
    color: #333;
    font-size: 11px;
    font-family: arial, sans-serif;
    padding: 0 7px 0 24px;
    line-height: 1em !important;
    background: #ededed;
    background: -moz-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e6e6e6));
    background: -webkit-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);
    background: -o-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);
    background: -ms-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);
    background: linear-gradient(to bottom, #f5f5f5 0%, #e6e6e6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e6e6e6',GradientType=0);

    &:hover {
        border-color: #C6C6C6;
    }

    div.image {
        position: absolute;
        display: block;
        top: 6px;
        left: 4px;
        height: 16px;
        width: 16px;
        background-repeat: no-repeat;
        background-size: contain;
    }

    div.text {
        display: inline-block;
        line-height: 27px !important;
        height: 27px;
        cursor: default;
    }
}

.xcloud-attach-menu-container {
    text-align: center !important;
    padding: 6px 0 !important;

    // fix for mobile on elastic
    iframe {
        position: static !important;
        width: 58px !important;
    }
}

.xcloud-save-attachment span.icon {
    background-position: 0px -2022px !important;
}

.xcloud-image-attachment-box {
    display: inline-block;
    margin: 0 5px;
}

.xelastic {
    // make space for the save buttons
    p.image-attachment .image-link {
        margin-bottom: 5.5rem;
    }
}

// Hide the Google Drive popup bubble that is shown when the user hovers over the Google Drive save button. When a long
// message with attachments is displayed, the attachment (with the cloud save buttons) are initially out of view because
// they are at the bottom of the message, and the .content element displays a scroll bar. However, when the Google Drive
// code is loaded, it creates the Save button and the popup bubble, which is absolutely positioned. Because .content is
// not absolute or relative, and the bubble is out of view, it makes the body display its own scroll bar and we end up
// with two scroll bars. Hiding the bubble is the simplest solution with least side effects to fix this.
// Unfortunately that bubble div doesn't have any handle we can use...
html.iframe body.xelastic.task-mail.action-preview > #messagestack ~ iframe + div {
    display: none !important;
}