@import '../default/var';
// @import './icon';
.#{$prefix}-select {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    &:not(.is-disabled).is-error {
        .#{$prefix}-input__icon {
            &.#{$prefix}-icon-arrow-down {
                color: $select-color-error;
            }
        }
    }
    .#{$prefix}-input__icon {
        transition: all 0.3s;
        &.#{$prefix}-icon-arrow-down {
            color: $select-color-arrow;
            font-size: smaller;
            font-weight: bold;
            cursor: pointer;
            transform: scale(0.6);
        }
        &.up {
            transform: scale(0.6) rotate(180deg);
        }
    }
    &-popper {
        position: absolute;
        z-index: 999;
        box-shadow: 0 2px 14px 0 rgba(50, 60, 71, 0.15);
        overflow: auto;
        background: $select-color-option-back;
        margin-top: 5px;
        transition: height 0.3s, transform 0.3s, opacity 0.3s;
        @each $size in large,
        medium,
        small,
        mini {
            $fs: map-get($font-sizes, $size);
            $bs: map-get($form-sizes, $size);
            &--#{$size} {
                max-height: ($bs + 10px) * 5;
                min-height: ($bs + 10px);
                .#{$prefix}-select-option {
                    height: $bs;
                    line-height: $bs;
                    font-size: $fs;
                    .#{$prefix}-icon-success-s {
                        line-height: $bs;
                        font-size: $fs - 2px;
                        transform: scale(0.8);
                    }
                }
            }
        }
    }
    &-option {
        padding: 0 20px;
        margin: 6px 0;
        cursor: pointer;
        white-space: nowrap;
        .#{$prefix}-icon-success-s {
            margin-left: 10px;
            float: right;
            margin-right: -10px;
        }
        &:hover {
            background: $select-color-option-back-hover;
        }
        &.active {
            color: $select-color-option-active-fore;
        }
        &.is-disabled {
            cursor: not-allowed;
            color: $select-color-disabled;
        }
        &-group {}
        &--loading,
        &--empty {
            text-align: center;
            color: $select-color-disabled;
            cursor: not-allowed;
            height: 80px;
            line-height: 80px;
            font-size: 14px;
        }
    }
}