// 1. Calculate select end padding to cover the space occupied by the icon.

@use 'sass:map';
@use '../../settings/cursors';
@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/form-fields' as form-fields-tools;
@use '../../tools/reset';

$_field-name: 'Select';

.Select {
    @include form-fields-tools.box-field-root();
}

.Select__label {
    @include form-fields-tools.box-field-label();
}

.Select__label--hidden {
    @include form-fields-tools.label-hidden();
}

.Select__label--required::after {
    @include form-fields-tools.label-required();
}

.Select__inputContainer {
    position: relative;
    display: flex;
}

.Select__icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    color: form-fields-theme.$box-field-input-color-state-default;
    pointer-events: none;
}

.Select__input {
    @include form-fields-tools.box-field-input();

    appearance: none;

    // 1.
    padding-inline-end: calc(
        #{map.get(form-fields-theme.$input-typography, mobile, font-size) *
            map.get(form-fields-theme.$input-typography, mobile, line-height)} + (
                2 * #{form-fields-theme.$box-field-input-padding-y}
            ) + #{form-fields-theme.$box-field-input-padding-x}
    );

    &::-ms-expand {
        display: none;
    }
}

.Select--fluid {
    @include form-fields-tools.box-field-fluid();
}

.Select .Select__input:focus-visible {
    @include form-fields-tools.box-field-focus-visible();
}

.Select__validationText,
.Select > [data-spirit-element='validation_text'] {
    @include form-fields-tools.validation-text();
}

.Select__helperText {
    @include form-fields-tools.helper-text();
}

@include form-fields-tools.input-field-validation-states($_field-name);

.Select--disabled > .Select__label {
    @include form-fields-tools.label-disabled();
}

.Select .Select__input:disabled,
:is(.Select--disabled, .Select.is-disabled) .Select__input {
    @include form-fields-tools.box-field-disabled-input();
}

:is(.Select--disabled, .Select.is-disabled) .Select__icon {
    color: form-fields-theme.$input-color-state-disabled;
}

:is(.Select--disabled, .Select.is-disabled) > :is(.Select__validationText, [data-spirit-element='validation_text']) {
    @include form-fields-tools.validation-text-disabled();
}

:is(.Select--disabled, .Select.is-disabled) > .Select__helperText {
    @include form-fields-tools.helper-text-disabled();
}
