@import "_SelectMixins.less";

@temp-label-background-color: #f5f5f5;
@temp-label-border-color: @aui-border-color;
@temp-label-text-color: @aui-color-link;
@temp-label-faint-text-color: @aui-color-mid;

@temp-label-active-background-color: @aui-color-hero;
@temp-label-active-border-color: @aui-color-atlassian;
@temp-label-active-text-color: #fff;
@temp-label-active-faint-text-color: #fff;

.jira-multi-select {
    .autocomplete-container();

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

    > textarea {
        .border-box();
        .text-overflow();
        font-size: 14px;
        line-height: 1.4285714285714;
        resize: none;
        &::-ms-clear {
            display: none;
        }
    }
}

// State for when autocomplete is active
.jira-multi-select > textarea.active {
    ~ .icon {
        .autocomplete-dropdown-button(active);
    }
}

.jira-multi-select > .representation {
    @gap: 3px;

    border: 0;
    left: 6px; // equal to left padding + left border
    margin: 0;
    padding: 0;
    position: absolute;
    right: 28px; // so that the lozenges won't overlap the icon.
    top: 5px - @gap; // So the first line of lozenges sits flush with the input.
    pointer-events: none; // So clicks will fall through to the input field itself.

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

// Layout
    .item-row {
        display: inline-block;
        height: 18px; // a result should not be any larger than line-height.
        margin: 0;
        max-width: 100%;
        padding: 1px 0; // we want the lozenge to effectively sit in the bottom-left corner of its box, so...
        padding-right: @gap; // to place space between the lozenge and the caret.
        padding-top: @gap; // to put spacing between multiple lines of lozenges.
        pointer-events: auto; // So that users can click items to focus them (or delete them)
        position: relative;
        vertical-align: top;

        > .value-item {
            border-width: 1px;
            border-style: solid;
            font-family: inherit;
            font-size: 14px;
            font-weight: normal;
            height: 100%;
            line-height: 1;
            margin: 1px;
            max-width: 100%;
            padding: 0 5px;
            padding-right: 20px; // to make room for the delete icon.
            vertical-align: top;
        }
        .value-text {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item-text {
            // NOTE: Do not set any text-overflow on this element, lest you mess up line-heights and text clipping
            // none
        }

        .item-delete {
            bottom: 1px;
            cursor: default;
            display: inline-block;
            height: 16px;
            line-height: 1;
            position: absolute;
            right: @gap + 5px;
            width: 16px;
            vertical-align: text-bottom;

            &:after {
                bottom: 0;
                content: '\00d7'; // x
                display: inline;
                font-size: 15px;
                line-height: 1;
                left: 3px;
                padding: 0 1px;
                position: absolute;
                speak: none;
                text-align: center;
                vertical-align: text-bottom;
            }
        }
    }

// Colours and such
    .value-item {
        .border-radius(3px);
        background: @temp-label-background-color;
        border-color: @temp-label-border-color;
        color: @temp-label-text-color;
    }
    .item-delete {
        color: @temp-label-faint-text-color;
        font-style: normal;
    }

    .focused {
        .value-item {
            background-color: @temp-label-active-background-color;
            border-color: @temp-label-active-border-color;
            color: @temp-label-active-text-color;
        }
        .item-delete {
            color: @temp-label-active-faint-text-color;
            font-style: normal;
        }
    }
}

// Fixes for certain browsers
.mozilla .jira-multi-select > .representation .item-row .item-delete:after {
    bottom: 1px;
    left: 2px;
}
.webkit .jira-multi-select > .representation .item-row .item-delete:after {
    bottom: 2px;
}

// Interop with AUI forms
// -----------------------
form.aui .jira-multi-select,
.jiraform .jira-multi-select {   // because the .jira-multi-select 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 > textarea { max-width: 75px; }
    &.medium-field, &.medium-field > textarea { max-width: 165px; }
    &.long-field, &.long-field > textarea { max-width: 500px; }
    &.full-width-field, &.full-width-field > textarea { max-width: none; }

    > textarea {
        padding-right: 28px; // to make room for the .icon
        vertical-align: top;
        width: 100%;
    }
}