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

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

// Base
// ------------------------------------------
.@{chosen-prefix}-container{
    position         : relative;
    padding          : @padding-small-vertical @padding-small-horizontal;
    width            : 100%;
    min-height       : @button-height-base;
    border-width     : @input-border-width;
    border-style     : solid;
    border-color     : @input-border-color;
    background-color : @input-bg;
    line-height      : @button-height-base - @input-border-width * 2 - @padding-small-vertical * 2;
    .inline-block();
    .border-radius(@input-border-radius);
    .transition(all, 0.3s);

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

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

    &.@{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    : @icon-family;
            content        : '\e077';
            font-size      : 16px;
            margin-left    : -24px;
        }
    }

    .disabled-result, .result-selected, .@{chosen-prefix}-single{
        &:before{
            float       : right;
            font-family : @icon-family;
            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 : @icon-family;
                    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;
        .clearfix-mixin();

        &>*{
            float : left;
        }

        .search-choice{
            background  : @gray-lighter;
            color       : @gray-dark;
            padding     : 0 @padding-mini-horizontal;
            margin      : 1px;
            height      : @button-height-small - @input-border-width;
            line-height : @button-height-small - @input-border-width;
        }

        .search-field{
            font-size : @font-size-base;

            input{
                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 : @icon-family;
            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    : @icon-family;
            content        : '\e077';
            font-size      : 16px;
            margin-left    : -24px;
            position       : relative;
        }
    }

    &.@{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;
            }
        }
    }
}