// @Author: songqi
// @Date:   2016-12-12T15:18:07+08:00
// @Last modified by:   songqi
// @Last modified time: 2016-12-20T11:34:09+08:00



@mixin search_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(search_select) {
    position: relative;

    &.open > .search_select__dropdown {
        display: block;
        @include search_select-focus($border-color-base);
    }

    &.open > .search_select__angle_icon {
        @include rotate(180deg);
    }

    &.open > .search_select__input {
        @include search_select-focus($brand-info);
    }

    // 为 required 字段时使用
    @include m(error) {
        .search_select__input {
            border-color: $brand-danger;
            color: $brand-danger;
        }
    }

    @include e(input) {
        @extend .form-control;
        display: block !important;
        width: 100% !important;
        padding-right: 20px;
        background-color: $input-bg !important;
        // background-image: url($base64-select-bg) !important;
        background-repeat: no-repeat;
        background-position: right center;
        cursor: default;

        &.disabled {
            cursor: not-allowed !important;
            background-color: #eeeeee !important;
        }
    }

    @include e(angle_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%;
        border: 1px solid $border-color-base;
        border-radius: $border-radius-base;
        background-color: #fff;
    }

    @include e(select_item_wrapper) {
        max-height: 300px;
        overflow-y: auto;
    }
    // 下拉框里的选项
    @include e(select_item) {
        & > span {
            display: block;
            padding: $padding-base-vertical $padding-base-horizontal;
            white-space: nowrap;
            color: $gray-dark;
            cursor: default;
        }

        &.selected > span {
            background-color: $gray-lighter;
            cursor: not-allowed;
        }

        &.hovered > span,
        & > span:hover {
            background-color: $state-info-bg;
        }
    }
    // 下拉框里的搜索框
    @include e(search_input) {
        width: 100%;
        padding: $padding-base-vertical + 5px $padding-base-horizontal;
        padding-right: 25px;
        border-width: 1px;
        border-color: transparent;
        border-bottom-color: $border-color-base;
        background-color: $gray-lighter;
    }

    @include e(search_icon) {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 16px;
        color: $input-color-placeholder;
        @include transition(all 0.3s ease);
    }
}

.form-inline .search_select {
    display: inline-block;
    width: 300px;
    vertical-align: middle;
}