@import "_SelectMixins.less";
@import "../../../ui/imports/colours";

.aui-ss {
    .autocomplete-container();

    > .aui-ss-icon {
        .autocomplete-dropdown-button(normal);
    }

    > .aui-ss-entity-icon { // for things like the bug issue type icon, or a user's avatar
        .border-box();
        background-repeat: no-repeat;
        -moz-background-size: 16px;
        background-size: 16px;
        display: none;
        height: 16px;
        left: 6px; // equal to left padding + left border
        margin-top: -8px;
        position: absolute;
        top: 50%;
        width: 16px;
        &.rounded {
            border-radius: 50%;
        }
    }

    > .aui-ss-field {
        .border-box();
        .text-overflow();
        resize: none;
        &::-ms-clear {
            display: none;
        }
        &:disabled {
            ~ .drop-menu {
                display: none;
            }
        }
    }

    &.aui-ss-select {
        > .aui-ss-field:not(.active) {
            background: var(--ds-background-input, @aui-color-N30);
            border-color: var(--ds-border-input, transparent);
        }

        &:hover .aui-ss-field:not(.active):not([disabled]) {
            background-color: var(--ds-background-input-hovered, @aui-color-N40);
        }
    }

    &.aui-ss-has-entity-icon {
        > .aui-ss-field.text {
            padding-left: 25px; // to make room for the .aui-ss-entity-icon
        }
        > .aui-ss-entity-icon {
            display: block;
            cursor: text;
        }
    }

    &.aui-ss-has-addon-icon {
        > .aui-ss-field.text {
            padding-right: 25px; // to make room for the addon icon
        }
    }

    &.aui-ss-select.aui-disabled {
        .aui-ss-icon.drop-menu {
            &::after {
                color: var(--ds-icon-disabled, @aui-color-N70);
            }
        }
    }
}

#project_container,
#issuetype_container {
    white-space: nowrap;

    .aui-ss-field {
        border: 1px solid var(--ds-border-accent-gray, #ccc);
        border-radius: 3.01px;
        box-shadow: var(--ds-shadow-overlay, inset 0 1px 3px #ccc);
        color: var(--ds-text, #333);
        font-family: inherit;
        font-size: 14px;
        height: 2.1428571428571em; /* 30px - using ems so the fields increase in line with user specified font-sizes */
        line-height: 1.4285714285714; /* Required for IE8. Causes misaligned placeholder text in Safari 5 - fixed in Safari 6 though */
        margin: 0;
        max-width: 250px;
        padding-top: 4px;
        padding-right: 28px;
        padding-bottom: 4px;
        resize: none;
        vertical-align: baseline;
        width: 100%;
        &::-ms-clear {
            display: none;
        }
    }
}

#issuetype-single-select,
#project-single-select {
    max-width: 250px;
    width: 100%;
}

// Interop with AUI forms
// -----------------------
form.aui .aui-ss,
.jiraform .aui-ss { // because the .aui-ss container is inline-block,
    width: 100%; // the width:100%; on the `form.aui .text` won't work.
    max-width: 250px; // we need to re-state it here ourselves.

    &.short-field,
    &.short-field > input {
        max-width: 75px;
    }
    &.medium-field,
    &.medium-field > input {
        max-width: 165px;
    }
    &.long-field,
    &.long-field > input {
        max-width: 500px;
    }
    &.full-width-field,
    &.full-width-field > input {
        max-width: none;
    }

    > .aui-ss-field {
        padding-right: 28px; // to make room for the .aui-ss-icon
        vertical-align: baseline;
        width: 100%;
    }
}

// JRA-35131 - Blink engine issue with vertical-alignment of input field within inline-block element.
.chrome form.aui .aui-ss > .aui-ss-field,
.chrome .jiraform .aui-ss > .aui-ss-field {
    vertical-align: middle;
}

#priority-suggestions .aui-list-section-footer {
    background-color: var(--ds-surface, #f2f2f2);
    white-space: normal;
}