/* Content styles
 * inside gmail
 */

@import 'nib';

div.qt-mirror {
    overflow: auto;
    position: absolute;
    z-index: -9999;
    margin: 0;

    white-space: pre-wrap;
    word-wrap: break-word;

    .qt-caret {
        display: inline-block;
    }
}

/* Autocomplete dropdown
*/

$colorActiveBg = #EEEEEE;
$colorText = #000;
$padding = 8px;

.qt-dropdown {
    display: none;
    width: 220px;

    position: absolute;
    z-index: 2147483646;

    overflow: hidden;
    margin: 0;
    padding: 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    border: 1px solid #c0c0c0;
    background: #fff;

    //font-family: 'sans-serif';
    font-size: 13px;
}

.qt-dropdown-show {
    display: block !important;
}

.qt-dropdown * {
    box-sizing: border-box;
}

.qt-dropdown-content {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 16em;
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
        position: relative;
        padding: $padding;
        overflow: hidden;
        cursor: pointer;

        color: $colorText;
        text-overflow: ellipsis;

        &.default {
            cursor: default;
            max-height: 4em;
        }

        &.active {
            background: $colorActiveBg;
        }

    }
}

.qt-title {
    display: block;
    overflow: hidden;
    padding: 0 3em .4em 0;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.qt-body {
    display: block;
    overflow: hidden;

    color: lighten($colorText, 32%);
    white-space: nowrap !important;
    text-overflow: ellipsis;
}

.qt-shortcut {
    position: absolute;
    top: $padding - 1px;
    right: $padding;
    padding: 2px 4px;
    border: 1px solid darken($colorActiveBg, 8%);
    background: darken($colorActiveBg, 4%);
    border-radius: 2px;

    font-size: .8em;
    font-family: monospace;
}

.qt-dropdown-search {
    display: block;
    width: 100%;
    padding: $padding;
    border: 0;
    box-shadow: 0 1px 2px darken($colorActiveBg, 8%);

    font-size: 1em;

    &:focus {
        outline: none;
    }
}

.qt-search-highlight {
    font-weight: bold;
}

.qt-blank-state {
    display: block;

    color: lighten($colorText, 32%);
    text-align: center;
}

.g-dropdown-toolbar {
    padding: 4px;
    button {
        appearance: none;
        background: linear-gradient(#ededed, #ededed 38%, #dedede);
        border: 1px solid rgba(0, 0, 0, 0.25);
        border-radius: 2px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
        color: #444;
        text-shadow: 0 1px 0 #F0F0F0;
        transition: all .1s ease-out;
        cursor: pointer;
    }
    .g-hide-button {
        visibility: hidden;
        float: right;
        margin-top: 4px;
        font-size: 12px;
    }
}

/* Quick Access Button for the Dialog
 */

.gorgias-qa-btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2147483647;
    display: block;
    width: 2em;
    height: 2em;
    padding: 0.2em;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;

    appearance: none;
    background: linear-gradient(#ededed, #ededed 38%, #dedede);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
    color: #444;
    text-shadow: 0 1px 0 #F0F0F0;
    transition: all .1s ease-out;

    &:hover {
        opacity: 1 !important;
        background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
        border-color: rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);

        color: #000;
    }

    &:active {
        background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
        box-shadow: none;
        text-shadow: none;
    }

    &:focus {
        color: #000;
    }

}

/* white arrow used on active
 */

.gorgias-qa-btn:before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    display: block;
    margin: 0 0 0 -5px;
    border-width: 0 5px 5px;
    border-color: transparent transparent #fff;
    border-style: solid;
    visibility: hidden;
}

.qt-dropdown-show-top .gorgias-qa-btn:before {
    bottom: auto;
    top: -3px;
    border-width: 5px 5px 0;
    border-color: #fff transparent transparent;
}

/* gorgias icon on the qa button
 */
.gorgias-qa-btn:after {
    content: '';
    position: relative;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;

    background: url('data:image/png;base64,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') no-repeat center center;
    background-size: contain;
}

/* show the qa button when a textarea, input or contenteditable is focused
 * when the button is clicked
 * when the dropdown is shown (after the button is clicked)
 */

.gorgias-qa-btn:active,
.qa-btn-dropdown-show .gorgias-qa-btn,
.gorgias-show-qa-btn .gorgias-qa-btn {
    opacity: .6;
    visibility: visible;
}

/* qa button active styles
 */

.qa-btn-dropdown-show .gorgias-qa-btn {
    background: #efefef;
    box-shadow: none;
    opacity: 1;
}

.qa-dropdown-show .gorgias-qa-btn:before {
    visibility: visible;
}

.qa-btn-dropdown-show .g-hide-button {
    visibility: visible;
}

.gorgias-qa-tooltip {
    display: none;
    position: absolute;
    z-index: 2147483647;
    width: 175px;
    height: 14px;
    padding: 5px;
    background: #2A2A2A;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
    font-size: 70%;
    font-weight: bold;

}

.gorgias-qa-tooltip:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px 8px 0;
    border-color: #2A2A2A transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -8px;
    left: 133px;
}

.g-sidebar {
    width: 220px;
    border: 0;
}