@use '../../styles/bootstrap/variables' as bootstrap-variables;
@use '../../styles/mixins/utilities';
@use '../../styles/variables';
@use './mixin.scss';

// select

select.form-control {
    &:not([size]):not([multiple]) {
        height: bootstrap-variables.$input-height;
    }

    &:focus::-ms-value {
        // Suppress the nested default white text on blue background highlight given to
        // the selected option text when the (still closed) <select> receives focus
        // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
        // match the appearance of the native widget.
        // See https://github.com/twbs/bootstrap/issues/19398.
        color: variables.$input-color;
        background-color: bootstrap-variables.$input-bg;
    }
}

select.form-control-sm {
    &:not([size]):not([multiple]) {
        height: bootstrap-variables.$input-height-sm;
    }
}

select.form-control-lg {
    &:not([size]):not([multiple]) {
        height: bootstrap-variables.$input-height-lg;
    }
}

select.form-control-xs {
    &:not([size]):not([multiple]) {
        height: variables.$input-height-xs;
    }
}

select.form-control-md {
    &:not([size]):not([multiple]) {
        height: variables.$input-height-md;
    }
}

.thy-select {
    position: relative;
    display: block;

    > .thy-icon {
        @include mixin.select-arrow-variant();
    }

    &:hover {
        .thy-select-remove {
            visibility: visible;
        }
    }

    .thy-select-remove {
        visibility: hidden;
        right: 12px;
        font-size: variables.$font-size-base;
        z-index: 11;
        background: variables.$bg-default;
        @include utilities.absolute-vertical-align-middle(false);
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-right: 30px;

        &:required {
            &:invalid {
                color: variables.$input-form-check-border-color;
            }
        }
    }

    option[value=''][disabled] {
        display: none;
    }

    option {
        color: variables.$input-color;
    }
}
