//
// Form select 弃用
//  

// @mixin form_select-focus($color) {
//     $color-rgba: rgba(red($color), green($color), blue($color), .6);    
//     border-color: $color;
//     outline: 0;
//     @include box-shadow(inset 0 0 4px $color-rgba, 0 0 8px $color-rgba);
// }

// @include b(form_select) {
//     position: relative;
    
//     &.open > .form_select__dropdown {
//         display: block;
//         @include form_select-focus($brand-info);
//     }

//     &.open > .form_select__icon {
//         @include rotate(180deg);
//     }
        
    
//     // 为 required 字段时使用
//     @include m(error) {
//         .form_select__input {
//             border-color: $brand-danger;
//             color: $brand-danger;
//         }
//     }

//     @include e(input) {
//         @extend .form-control;
//         display: block !important;
//         width: 100% !important;
//         padding-right: 20px;
//         cursor: default;
//     }

//     @include e(icon) {
//         position: absolute;
//         top: 7px;
//         right: 8px;
//         font-size: 20px;
//         color: $input-color-placeholder;
//         @include transition(all 0.3s ease);
//     }

//     @include e(dropdown) {
//         position: absolute;
//         top: 100%;
//         z-index: $zindex-select-dropdown;
//         display: none;
//         margin-top: 5px;
//         min-width: 100%;
//         max-height: 300px;
//         border: 1px solid $border-color-base;
//         border-radius: $border-radius-base;
//         background-color: #fff;
//         overflow-y: auto;

//         // & > li {
//         //     border-bottom: 1px solid $gray;
//         // }

//         // & > li:last-child {
//         //     border-bottom: 0;
//         // }
        
//         & > li > span {
//             display: block;
//             padding: $padding-base-vertical $padding-base-horizontal;
//             color: $gray-dark;
//             cursor: default;
//         }

//         > li.selected > span, 
//         > li > span:hover {
//             background-color: $gray-lighter;
//         }

//         li.selected > span {
//             cursor: not-allowed;
//         }
//     }
// }

// .form-inline .form_select {
//     display: inline-block;
//     width: 172px;
//     vertical-align: middle;
// }

//
// Form multi select
//
// 选项的多种样式
@mixin form_multi_select-variant($color, $background, $border) {
    & > div {
        border-color: $border;
        background-color: $background;
    }

    & > div > a,
    & > div > span {
        color: $color;
    }
}
// 选中时的状态
@mixin form_multi_select-focus($color: $input-border-focus) {
    $color-rgba: rgba(red($color), green($color), blue($color), .6);
    
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 0 4px $color-rgba, 0 0 8px $color-rgba);
}

@include b(form_multi_select) {
    position: relative;

    &.open > .form_multi_select__input {
        @include form_multi_select-focus;    
    }

    &.open > .form_multi_select__dropdown {
        display: block;
    }

    // required 时使用
    @include m(error) {
        .form_multi_select__input {
            border-color: $brand-danger;
            color: $brand-danger;

            i {
                color: $brand-danger;                
            }
        }
    }

    @include e(input) {
        @extend .form-control;
        display: block !important;
        width: 100% !important;
        height: auto;
        min-height: $input-height-base;
        padding: 0 2px 2px 0;
        
        &.targets-success {
            @include form_multi_select-variant(#fff, $brand-success, $brand-success); 
        }
        
        &.targets-info {
            @include form_multi_select-variant(#fff, $brand-info, $brand-info);
        }

        & > div {
            position: relative;
            display: inline-block;
            margin: 2px 0 0px 2px;
            padding: 2px 8px 3px 18px;
            border: 1px solid $border-color-base;
            background-color: $gray-lightest;


            > a {
                position: absolute;
                top: -1px;
                left: 5px;
                font-size: 16px;
                font-weight: 700;
                color: $gray;
                cursor: pointer;
            }

            > span {
                font-size: 12px;
                color: $gray;
            }
        }
        
        // 多选 control 的 placeholder
        & > i {
            display: block;
            height: 28px;
            padding: $padding-base-vertical $padding-base-horizontal;
            font-style: normal;
            color: $input-color-placeholder;
            cursor: default;
        }
    }

    @include e(dropdown) {
        position: absolute;
        top: 100%;
        z-index: $zindex-select-dropdown;
        display: none;
        margin-top: 5px;
        min-width: 100%;
        max-height: 300px;
        border: 1px solid $border-color-base;
        border-radius: $border-radius-base;
        background-color: #fff;
        overflow-y: auto;
        
        & > li > span {
            display: block;
            padding: $padding-base-vertical $padding-base-horizontal;
            color: $gray-dark;
            cursor: default;
        }

        > li.selected > span {
            background-color: $gray-lighter;
        }
        
        > li > span:hover {
            background-color: $state-info-bg;    
        }
        

        li.selected > span {
            cursor: not-allowed;
        }
    }
}

.form-inline .form_multi_select {
    display: inline-block;
    width: 172px;
    vertical-align: middle;
}