@charset "UTF-8";
@import "../../next-core/lib/next.scss";
@import "./scss/function.scss";
@import "./scss/mixin.scss";
@import "./scss/placeholder.scss";
@import "./scss/variable.scss";

#{$select-prefix} {
    @include box-sizing;
    @include global-font;
    display: inline-block;
    border: $select-border-width $select-border-style $color-line1-1;
    cursor: pointer;
    position: relative;
    transition: ease all 0.3s 0.1s;
    border-radius: $select-border-radius;
    min-width:100px;
    &-placeholder {
        color: $select-color-hint;
    }
    #{$select-prefix}-arrow, #{$select-prefix}-clear{
        position: absolute;
    }
    #{$select-prefix}-arrow {
        color: $select-icon-color;
    }
    #{$select-prefix}-clear {
        display: none;
        color: #ccc;
        transition: color ease 0.3s;
        &:hover {
            color: $select-icon-color;
        }
    }
    &-inner {
        /* fix http://gitlab.alibaba-inc.com/next/select/issues/34*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        width: 100%;
    }

    &:hover #{$select-prefix}-clear {
        display: inline-block;
    }
    &.has-clear:hover #{$select-prefix}-arrow{
        display: none;
    }

    &.multiple {
        #{$select-prefix}-inner{
            display: block;
            white-space: normal;
            width: auto;
        }
    }
    &-inner-item {
        margin-right: $select-item-margin-right;
        background: $select-color-item-bg;
        border-radius: $select-item-border-radius;
        padding: $select-item-padding-ver $select-item-padding-hoz;
        display: block;
        float: left;
        height: 20px;
        line-height: 20px;
        max-width: 100%;
        padding-right: 16px;
        position: relative;
        &-label {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        a {
            color: $select-icon-color;
            position: absolute;
            right: $select-item-padding-hoz;
            top:0;
        }
    }
    &-search {
        margin: 0 10px;
        margin-bottom: 10px;
        position: relative;
        .#{$css-prefix}input {
            width: 100%;
            padding-right: 24px;
        }
        .#{$css-prefix}icon{
            position: absolute;
            top:0px;
            right:5px;
            color: #999;
        }
    }

    &-menu{
        max-height: 260px;
        overflow: auto;
    }

    &-menu.has-search {
        .#{$css-prefix}menu-content{
            max-height: 260px;
            overflow: hidden;

            &.overflow-auto {
                overflow: auto;
            }
        }
        max-height: none;
        overflow: visible;
    }

    .#{$css-prefix}comobobox-arrow-wrapper {
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        background: $select-box-bg;
        border-left: 1px solid $select-box-border-color;
    }

    @include selectState(
            $select-color,
            $select-color-disabled,
            $select-color-hint,
            $select-color-border,
            $select-color-border-hover,
            $select-color-border-focus,
            $select-color-border-disabled,
            $select-color-bg-disabled,
            $select-color-border-active,
            $select-color-bg
    );

    /*@include selectSize(*/
    /*        $select-middle-height,*/
    /*        $select-middle-padding-lr,*/
    /*        $select-middle-font,*/
    /*        $select-border-width,*/
    /*        $select-icon-middle-size*/
    /*);*/

    &.large {
        @include selectSize(
                $select-large-height,
                $select-large-padding-lr,
                $select-large-padding-multiple,
                $select-large-padding-multiple-tb,
                $select-large-font,
                $select-border-width,
                $select-icon-large-size
        );
    }

    &.medium {
        @include selectSize(
                $select-middle-height,
                $select-middle-padding-lr,
                $select-middle-padding-multiple,
                $select-middle-padding-multiple-tb,
                $select-middle-font,
                $select-border-width,
                $select-icon-middle-size
        );
    }

    &.small {
        @include selectSize(
                $select-small-height,
                $select-small-padding-lr,
                $select-small-padding-multiple,
                $select-small-padding-multiple-tb,
                $select-small-font,
                $select-border-width,
                $select-icon-small-size
        );
    }
}

#{$select-prefix}.no-border {
    border-width: 0;
    &:hover {
        color: $select-no-border-hover-color;
        #{$select-prefix}-arrow {
            border-color: $select-no-border-hover-color;
        }
    }
    &.disabled {
        background: $select-color-bg;
        &:hover {
            color: $select-color-disabled;
            #{$select-prefix}-arrow {
                border-color: $select-color-border-disabled;
            }
        }
    }
}

.#{$css-prefix}comobobox {
    input {
        border: 0;
        outline: 0;
        min-width: 100%;
        background: transparent;
    }

    /*&.small{*/
    /*    padding-left:  $select-box-padding-small;*/
    /*    padding-right: $select-box-padding-small;*/
    /*}*/
    /**/
    /*&.large{*/
    /*    padding-left: $select-box-padding-large;*/
    /*    padding-right: $select-box-padding-large;*/
    /*}*/
    /**/
    /*&.medium{*/
    /*    padding-left: $select-box-padding-medium;*/
    /*    padding-right: $select-box-padding-medium;*/
    /*}*/

    &.multiple {
        input {
            min-width: auto;
            width:10px;
            max-width: 100%;
        }
    }
    &.disabled {
        .#{$css-prefix}comobobox-arrow-wrapper {
            border-left-color: $select-color-border-disabled;
        }
    }
    &.has-clear:hover #{$select-prefix}-arrow{
        display: inline-block;
    }
}