/*
Combobox

Styles used for combobox. There are 2 variations where one uses selectize.js and the other uses jquery.autoSuggest.js

Markup:
<h3>Selectize version</h3>
<div class="combobox__wrapper combobox__wrapper--ko">
    <div class="combobox__control-wrapper">
        <div class="combobox__dropdown-toggle"></div>
        <div class="selectize-control single plugin-item_nowrap plugin-hide_add_new plugin-tab_select_and_advance">
            <div class="selectize-input items has-options not-full">
                <input type="text" class="selectize-input">
            </div>
            <div class="selectize-dropdown single plugin-item_nowrap plugin-hide_add_new plugin-tab_select_and_advance">
                <div class="selectize-dropdown-content">
                    <div data-value="9" data-selectable="" class="option-wrap Css">225 Main Apartments</div>
                    <div data-value="1" data-selectable="" class="option-wrap Css active">74 Grove Street (Single family home)</div>
                    <div data-value="3" data-selectable="" class="option-wrap Css">100 Main Ave (duplex)</div>
                    <div data-value="6" data-selectable="" class="option-wrap Css">3 Industrial Road</div>
                    <div data-value="7" data-selectable="" class="option-wrap Css">Seaport Association</div>
                    <div data-value="7" data-selectable="" class="option-wrap Css">Seaport Association and many more words that will wrap</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display: block; width: 100%; height: 200px;"></div>
<h3>Legacy version (used in popups and some older aspx pages)</h3>
<div class="combobox__wrapper combobox__wrapper--popup-combobox">
    <div class="combobox__control-wrapper combobox__control-wrapper--margin-right">
        <div class="combobox__dropdown-toggle combobox__dropdown-toggle--popup-combobox"></div>
        <input type="text" class="form-element__input form-element__input--combobox form-element__input--text-dropdown-list" placeholder="Select...">
    </div>
</div>
<div class="combobox__menu" style="width: 248px;">
    <div class="combobox__menu-item">Asset accounts</div>
    <div class="combobox__menu-item">Late fee income (office)</div>
    <div class="combobox__menu-item combobox__menu-item--active">Company savings</div>
    <div class="combobox__menu-item">Landscaping</div>
    <div class="combobox__menu-item">Application fee income</div>
</div>
<div style="display: block; width: 100%; height: 200px;"></div>

Name: combobox

Styleguide 3.6
*/
// -------------------------------------
// VARIABLE OVERRIDES FOR SELECTIZE.LESS
// -------------------------------------
@selectize-color-highlight: rgba(125,168,208,0.2);
@selectize-max-height-dropdown: 200px;
@selectize-color-text: @color-input;

// If these values are changed, javascript in needs to also change because the input is absolutely positioned programmatically.
@selectize-padding-y: 0px;

// -------------------
// BUILDIUM "COMBOBOX"
// -------------------

@grid-line-height: 40px;
@combobox-size: 40px;
@legacy-combobox-offset: 27px;

// SELECTIZE ELEMENTS
// ------------------
.selectize-input {
    display: inline-block;
    position: relative;
    width: 100%;
    height: @combobox-size;
    padding-top: 0 !important; // This fixes an override happening in ASPX pages
    white-space: nowrap;
    vertical-align: top;
    color: @selectize-color-text;
    background-color: #FFFFFF;
    border-radius: @border-radius-default;
    border-right: none;
    border: 1px solid @color-border-input;
    box-sizing: border-box;
    overflow: hidden;
    z-index: @z-index-selectize-input;

    .item-wrap-inner {
        line-height: @combobox-size - 2px;
    }

    > * {
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
    }

    &, input, &.input-active, &.input-active input {
        cursor: text;
    }

    &.disabled * {
        cursor: not-allowed !important;
    }

    &.disabled {
        cursor: not-allowed !important;
        border-color: @color-border-input;
        opacity: @opacity-disabled;
    }

    input {
        display: block;
        position: absolute !important;
        color: @selectize-color-text;
    }

    > input {
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 0 0 @dropdown-item-padding-x;
        margin: 0 1px !important;
        text-indent: 0 !important;
        border: 0 none !important;
        background: none !important;
        -webkit-user-select: auto !important;

        &:focus {
            outline: none !important;
        }
    }
}

.selectize-input > input.selectize-input--force-width {
    width: 24px !important;
}

.selectize-control {
    position: relative;
}

.selectize-control.single .selectize-input.input-active {
    display: inline-block;
    background-color: #FFFFFF;
    cursor: text;
}

.selectize-control.single .selectize-input {
    &, input { cursor: pointer; }
    &.input-active, &.input-active input { cursor: text; box-shadow: none }
}

.selectize-control.single .selectize-input:after {
    // override the dropdown caret made by selectize
    display: none;
}

.selectize-dropdown {
    position: absolute;
    width: 100%;
    margin-top: 5px;
    padding: 10px 0;
    line-height: @combobox-size;
    color: @selectize-color-text;
    background-color: #FFFFFF;
    border: 1px solid @color-border-popover;
    border-radius: @border-radius-default;
    box-sizing: border-box;
    box-shadow: @combobox-menu-box-shadow;
    z-index: @z-index-selectize-dropdown;

    [data-selectable] {
        cursor: pointer;
        overflow: hidden;
        .highlight {
            background: @selectize-color-highlight;
        }
        &.selected,
        &.js-selected--dropdown-open { //used by buildium-type-plugin
            .text-bold;
        }
    }
    [data-selectable], .optgroup-header {
        padding: @dropdown-item-padding;
        line-height: @dropdown-item-line-height;
        min-height: (@dropdown-item-padding-y * 2) + @dropdown-item-line-height;
        box-sizing: border-box;
    }

    .optgroup-header {
        padding-top: @dropdown-item-padding-y + 2px;
        font-weight: bold;
        font-size: @font-size-base;
    }

    .optgroup {
        border-top: 1px solid @color-popover-divider;

        &:first-child {
            border-top: 0 none;
        }
    }

    .active {
        background-color: @color-popover-link-bg;
        color: @color-input;
    }
}

.selectize-dropdown-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: @selectize-max-height-dropdown;

    .optgroup-header {
        background-color: #FFFFFF;
        cursor: default;
    }

    .optgroup:first-child .optgroup-header {
        border-top: 0 none;
    }

    .option-wrap {
        &.add-new {
            border-top: 1px solid #FFFFFF;
            margin-top: 1px;
        }

        &.create {
            color: initial;
        }

        &.selected {
            .text-bold;
        }
    }
}

// COMBOBOX STATES
// ---------------
.combobox--has-focus {
    .combobox__dropdown-toggle,
    .combobox__dropdown-toggle--is-active,
    .selectize-input {
        border-color: @color-buildium-green;
    }

    .selectize-input.focus {
        border-color: @color-buildium-green;
    }
}

.combobox--has-error,
.combobox__control-wrapper.error {
    .combobox__dropdown-toggle,
    .combobox__dropdown-toggle--is-active,
    .selectize-input {
        border-color: @color-error !important;
    }

    .selectize-input.focus {
        border-color: @color-error;
    }
}

.combobox__wrapper {
    width: 100%;

    [type="text"]:disabled {
        opacity: @opacity-disabled;
        cursor: not-allowed;
    }

    &:hover {
        .selectize-input,
        .combobox__dropdown-toggle {
            border-color: @color-border-input-hover;
        }

        .selectize-input.disabled,
        .combobox__dropdown-toggle--disabled {
            border-color: @color-border-input;
        }
    }
}

.combobox__wrapper--margin-bottom {
    margin-bottom: 15px;
}

// Default width and margin for aspx selectize comboboxes
.combobox__wrapper--ko {
    width: @legacy-width-size2;
    .combobox__wrapper--margin-bottom;
}

.combobox__wrapper--popup-combobox {
    display: inline-block;
    width: auto;
    padding-right: @legacy-combobox-offset;

    .form-element__input {
        width: 100%;
    }

    &:hover {
        .form-element__input,
        .combobox__dropdown-toggle {
            border-color: @color-border-input-hover;
        }
    }
}

.combobox__control-wrapper {
    position: relative;
}

.combobox__control-wrapper--margin-right {
    margin-right: @legacy-combobox-offset;
}

.combobox__control-wrapper--budget-combobox {
    width: 156px;
}

.combobox__dropdown-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    content: ' ';
    display: block;
    width: 28px;
    height: @combobox-size;
    border: 1px solid @color-border-input;
    box-sizing: border-box;
    border-radius: 0 @border-radius-default @border-radius-default 0;
    background-color: #FFFFFF;

    &:hover {
        cursor: pointer;
        border-color: @color-border-input-hover;
    }

    &:after {
        content: ' ';
        display: block;
        position: absolute;
        top: 46%;
        right: 8px;
        height: 5px;
        width: 10px;
        .svgicon--icons-chevron-down-grey;
    }
}

.combobox__dropdown-toggle--is-active {
    border-color: @theme-blue1;
    border-left-color: @color-border-input;
}

.combobox__dropdown-toggle--disabled {
    opacity: @opacity-disabled;

    &:hover {
        cursor: not-allowed;
        border-color: @color-border-input;
    }
}

// Comboboxes in popups look and behave differently than the selectize versions
.combobox__dropdown-toggle--popup-combobox {
    height: 40px;
    right: -@legacy-combobox-offset;
}

.combobox--blend-with-grid {
    .combobox__dropdown-toggle,
    .selectize-control,
    .selectize,
    .selectize-input {
        border-radius: 0;
    }

    .selectize-input:after {
        // the little triangle
        display: none;
    }

    .selectize-control {
        line-height: @grid-line-height;
    }

    .selectize-input {
        border-width: 0px;
        background-color: transparent;
        height: @grid-line-height;

        .disabled {
            opacity: @opacity-disabled;
        }

        > input {
            height: @grid-line-height !important;
            padding-left: 15px;
            margin: 0 !important;
        }

        .item-wrap-outer {
            left: 15px !important;
        }
    }

    .combobox__dropdown-toggle, .combobox__dropdown-toggle:after {
        display: none;
    }

    .combobox__dropdown-toggle {
        height: @grid-line-height;
    }
    // toggle state within grids
    &.combobox--has-focus {
        .combobox__dropdown-toggle, .combobox__dropdown-toggle:after {
            display: block;
        }

        .selectize-input {
            border-width: 1px;
        }
    }

    &.combobox--has-error,
    &.combobox__control-wrapper.error {
        .combobox__dropdown-toggle,
        .combobox__dropdown-toggle--is-active,
        .selectize-input {
            border: 1px solid @color-error !important;
        }
    }
}

.plugin-item_nowrap.selectize-control.single .selectize-input {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &.input-active {
        padding-right: 45px;

        .item-wrap-inner {
            &.long-input-value {
                text-overflow: initial;
                width: auto;
                position: absolute;
                right: 8px;
            }
        }
    }


    .item-wrap-outer {
        overflow: hidden;
        position: absolute;
        top: @selectize-padding-y;
        bottom: @selectize-padding-y;
        right: @combobox-size + 5px;
        left: @dropdown-item-padding-x;

        .item-wrap-inner {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
        }
    }
}

//This is used to style the menu for TextDropDownList and TextDropDownListControl
.combobox__menu {
    border-radius: @border-radius-default;
    border: 1px solid @color-border-popover;
    position: absolute;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: @combobox-menu-box-shadow;
    z-index: @z-index-legacy-combobox;
    font-size: @font-size-base;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: auto;
    overflow-x: hidden;
}

.combobox__menu-item {
    cursor: pointer;
    line-height: @dropdown-item-line-height;
    padding: @dropdown-item-padding;
    white-space: nowrap;
}

.combobox__menu-item--active {
    background-color: @color-popover-link-bg;
}