@chosen-prefix : chosen; // new version
//@chosen-prefix : chzn; // old version

@input-padding : .5em;

.@{chosen-prefix}-select { width : 100%; }
.@{chosen-prefix}-select-deselect { width : 100%; }

// Base
// ------------------------------------------
.@{chosen-prefix}-container when (@componentsJS-chosen) {
    position         : relative;
    padding          : @input-padding / 2;
    width            : 100% !important;
    min-height       : unit(@button-line-height * 2, em);
    color            : @input-color;
    border           : @input-border-width solid @input-border-color;
    background-color : @input-bg;
    line-height      : unit(@button-line-height * 2, em) - @input-padding;
    .inline-block();
    .border-radius(@input-border-radius);
    .transition();

    &.@{chosen-prefix}-container-active {
        border-color : @input-border-color-focus;
    }

    * {
        margin      : 0;
        font-size   : 1em;
        line-height : @line-height;
    }

    &.@{chosen-prefix}-container-single {
    }

    &.@{chosen-prefix}-container-multi {
        cursor : text;
    }

    .@{chosen-prefix}-single {
        line-height : @button-height-base - @input-border-width * 2 - @padding-small-vertical * 2;
        display     : block;
        .text-overflow;

        &::before {
            content : '\e0b7';
        }
    }

    input {
        .box-shadow(none);
    }

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

    .@{chosen-prefix}-drop {
        background-color : @input-bg;
        border-style     : solid;
        border-width     : @input-border-width;
        border-color     : @input-border-color;
        border-top-color : @input-border-color-focus;
        position         : absolute;
        top              : 100%;
        left             : -2000px;
        z-index          : 500;

        .@{chosen-prefix}-with-drop& {
            left  : -@input-border-width;
            right : -@input-border-width;
        }
    }

    .@{chosen-prefix}-search {
        padding : @padding-base-vertical;

        input {
            padding-right : 30px;
        }

        &::after {
            color          : @gray-light;
            vertical-align : middle;
            font-family    : @font-family-icons;
            content        : '\e077';
            font-size      : 16px;
            margin-left    : -24px;
        }
    }

    .disabled-result, .result-selected, .@{chosen-prefix}-single {
        &::before {
            float       : right;
            font-family : @font-family-icons;
            font-size   : 16px;
            width       : 16px;
        }
    }

    .@{chosen-prefix}-results {
        max-height : 300px;
        overflow   : auto;

        li {
            color   : @text-color;
            cursor  : pointer;
            padding : @padding-small-vertical @padding-small-horizontal;

            &:hover, &.highlighted {
                background : @gray-lighter;
                color      : @gray-dark;
            }

            &.group-result {
                font-style : italic;
                color      : @gray-light;
                background : transparent;
                padding    : @padding-small-vertical @padding-small-horizontal;
                cursor     : default;

                &::before {
                    font-family : @font-family-icons;
                    content     : ' \e0c1';
                }
            }

            &.active-result {

                em {
                    text-decoration : underline;
                }

                &:hover {
                }
            }

            &.result-selected {
                background : @gray-lighter;
                color      : @gray-light;

                &::before {
                    color   : @brand-success;
                    content : '\e0a5';
                }
            }

            &.disabled-result {
                background : transparent;
                color      : @gray-light;

                &::before {
                    color   : @brand-error;
                    content : '\e0a9';
                }
            }

            &.no-results {
                padding : @padding-base-vertical @padding-base-horizontal;
                .text-overflow;
            }
        }
    }

    .@{chosen-prefix}-choices {
        font-size  : @font-size-small;
        max-height : 200px;
        overflow   : auto;
        .clearfix-mixin();

        & > * {
            float : left;
        }

        .search-choice {
            background  : @gray-lighter;
            color       : @gray-dark;
            padding     : 0 @padding-mini-horizontal;
            margin      : @input-border-width;
            min-height  : unit(@button-line-height * 2, em) * @font-size-small;
            line-height : unit(@button-line-height * 2, em) * @font-size-small;
        }

        .search-field {

            &:first-child {
                input {
                    width : auto !important;
                }
            }

            input {
                background : transparent !important;
                border     : none;
                height     : auto;
                padding    : (@padding-mini-vertical + @input-border-width) @padding-mini-horizontal;
            }
        }
    }

    .search-choice-close {
        margin-left : 5px;
        color       : @brand-error;
        .icon-size(10px);

        &::before {
            font-family : @font-family-icons;
            content     : '\e0a2';
        }
        &:hover {
            color : darken(@brand-error, 10%);
        }
    }

    .@{chosen-prefix}-search {
        padding : @padding-base-vertical;

        input {
            padding-right : 30px;
        }

        &::after {
            color          : @gray-light;
            vertical-align : middle;
            font-family    : @font-family-icons;
            content        : '\e077';
            font-size      : 16px;
            margin-left    : -24px;
            position       : relative;
        }
    }

    &.chosen-disabled {
        .search-choice {
            border-color : darken(@input-bg-disabled, 10%);
            background   : @input-bg-disabled;
            color        : darken(@input-bg-disabled, 30%);
        }
        .search-choice-close {
            cursor : default;
            color  : darken(@input-bg-disabled, 30%);
        }
    }

    &.@{chosen-prefix}-rtl {
        direction : rtl;

        .disabled-result, .result-selected, .@{chosen-prefix}-single {
            &::before {
                float : left;
            }
        }

        .search-choice-close {
            float        : left;
            margin-left  : 0;
            margin-right : 5px;
            margin-top   : (@button-height-small - @input-border-width - 10px) / 2;
        }

        .@{chosen-prefix}-choices > * {
            float : right;
        }

        .@{chosen-prefix}-search {
            input {
                padding-left  : 30px;
                padding-right : @padding-base-vertical;
            }

            &::after {
                margin-left  : 0;
                margin-right : -24px;
            }
        }
    }
}