@import "./base/var";
@import "./mixins/index.scss";


@mixin selectSize($size) {

    $font-size: $--font-size-default;
    $height: $--height-default;
    $tag-height: $--tag-height-default;

    @if ($size == 'large') {
        $font-size: $--font-size-large;
        $height: $--height-large;
        $tag-height: $--tag-height-large;
    } @else if ($size == 'small') {
        $font-size: $--font-size-small;
        $height: $--height-small;
        $tag-height: $--tag-height-small;
    } @else if ($size == 'mini') {
        $font-size: $--font-size-mini;
        $height: $--height-mini;
        $tag-height: $--tag-height-mini;
    }

    font-size: $font-size;
    @include ci(select-reference) {
        font-size: $font-size;

        &--multiple {
            height: auto;
            min-height: $height;
        }

        &__multiple-input {
            height: #{$height - 2px};
            font-size: $font-size;
        }

        &__multiple-tag {
            height: #{$tag-height - 4px};
            line-height: #{$tag-height - 6px};
            margin-top: #{($height - ($tag-height - 2px)) / 2};
            margin-bottom: #{($height - ($tag-height - 2px)) / 2};
        }

        &__suffix {
            font-size: $font-size;
        }
    }
}

@include c(select) {
    display: inline-block;
    width: 100%;
    line-height: $--line-height-default;
    vertical-align: top;

    @include e(reference) {
        outline: none;
        user-select: none;
    }

    @include e(drop-inner) {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        border: $--border-default;
        border-radius: $--border-radius-default;
        box-shadow: $--box-shadow-default;
        background-color: $--color-white;
        padding: 5px 0;
    }

    @include e(empty) {
        box-sizing: border-box;
        text-align: center;
        padding: 7px 16px;
        font-size: $--select-option-font-size;
        color: $--color-text-empty;
        @include utils-ellipsis();
    }

    @include e(loading) {
        box-sizing: border-box;
        text-align: center;
        padding: 7px 16px;
        font-size: $--select-option-font-size;
        color: $--color-text-empty;
        @include utils-ellipsis();
        & > i {
            margin-right: 10px;
        }
    }

    @include m(large) {
        @include selectSize(large);
    }

    @include m(default) {
        @include selectSize(default);
    }

    @include m(small) {
        @include selectSize(small);
    }

    @include m(mini) {
        @include selectSize(mini);
    }
}


@include c(option) {
    display: block;
    width: 100%;
    padding: 7px 16px;
    position: relative;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
    //line-height: normal;
    font-size: $--select-option-font-size;
    color: $--select-option-text-color;
    transition: all $--animation-time ease-in-out;
    background-color: $--color-white;
    //@include utils-ellipsis();

    @include when(selected) {
        color: $--color-primary;
        //background-color: $--background-color-hover;
    }

    @include e(text) {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        @include utils-ellipsis();
    }

    @include e(multiple) {
        padding-right: $--select-option-padding-right-mutiple;
        @include when(selected) {
            background-color: transparent;
        }
    }

    @include e(icon) {
        position: absolute;
        right: #{$--select-option-padding-right-mutiple / 2};
        top: 50%;
        transform: translateY(-50%);
        color: $--color-primary;
    }

    @include when(hover) {
        background-color: $--background-color-hover;
    }

    @include when(disabled) {
        cursor: not-allowed;
        color: $--color-text-disabled;
        background-color: transparent;
    }

    &.is-disabled.is-selected {
        color: $--color-primary;
        background-color: transparent;
    }
}

@include c(option-group) {
    display: block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    text-align: left;
    cursor: default;
    //line-height: normal;
    //font-size: $--select-option-font-size;
    color: $--select-option-text-color;
    transition: all $--animation-time ease-in-out;
    background-color: $--color-white;
    @include utils-ellipsis();

    @include e(title) {
        padding: 7px 16px;
        color: $--color-text-des;
    }

    @include e(wrap) {
        @include ci(option) {
            padding-left: 32px;
            padding-right: 32px;
        }
    }
}


@include c(select-reference) {
    display: inline-block;
    cursor: pointer;
    position: relative;
    width: 100%;
    vertical-align: middle;

    @include m(multiple) {
        outline: none;
        box-sizing: border-box;
        width: 100%;
        text-align: left;
        vertical-align: middle;
        position: relative;
        display: inline-block;
        border-radius: $--border-radius-default;
        background-color: $--color-white;
        border: $--border-default;
        padding-left: $--input-padding-horizontal-default;
        padding-right: $--select-suffix-width;
        padding-top: 0;
        padding-bottom: 0;
        font-size: $--font-size-default;
        color: $--color-text-default;
        transition: all $--animation-time ease-in-out;
    }

    @include m(focus) {
        border-color: $--color-primary;
        box-shadow: 0 0 0 2px mix($--color-primary, $--color-white, $--button-hover-percent);
    }

    @include m(hover) {
        border-color: $--color-primary;
    }

    @include m(disabled) {
        background-color: $--background-color-disabled;
        border-color: $--border-color-disabled;
        color: $--color-text-disabled;
        cursor: not-allowed;

        @include e((multiple-input, multiple-tag), false) {
            cursor: not-allowed;
            color: $--color-text-disabled;
        }
    }

    @include e(input) {
        input {
            cursor: pointer;
        }
    }

    @include e(suffix) {
        position: absolute;
        right: 1px;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        width: $--select-suffix-width;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    @include e(suffix-icon) {
        transition: all $--animation-time ease-in-out;
    }
    @include e(suffix-icon-rotate) {
        @include utils-rotate();
    }

    @include e(multiple-tag, false) {
        outline: none;
        display: inline-block;
        text-align: left;
        box-sizing: border-box;
        overflow: hidden;
        margin-left: 0;
        margin-right: 5px;
        vertical-align: middle;
    }

    @include e(multiple-input) {
        border: none;
        outline: none;
        max-width: 100%;
        //min-width: 32px;
        background-color: transparent;
        cursor: pointer;
        box-sizing: border-box;
        vertical-align: middle;
        //font-size: $--font-size-default;
        color: $--color-text-default;
        //height: #{$--height-default - 10px};

        &::placeholder {
            color: $--color-text-placeholder;
        }
    }
}


