// 1. We pass the input arrows width if the input type is number.
// 2. If the input has a size attribute, we calculate the width based on the input width, padding, border width and arrows width.
// 3. We generate the input width based on the number of characters.
// 4. We position the password toggle button next to the input and use pseudo-element for border styling.
//    We do this because password managers place their icon buttons inside the password input.
// 5. Because the button is next to the input, we need to use pseudo element to style the border around both of them.
// 6. We need to set the same background color for the button when the input is hovered, active or focused.
// 7. We toggle icons of the password toggle and we disable the no-descending-specificity to make the code more readable.
// 8. To make the 5. work, we need to style the input and the button when the input is focused.
// 9. The password toggle button should have its own focus-visible style.
// 10. Disabled input and its optional password toggle should have the same disabled style.
//     The code is more comprehensible when styling elements in this order:
//       1. input (with a pseudo-element),
//       2. password toggle button,
//       3. validation text.
//     Also, high-specificity selectors are necessary to achieve the desired result.

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

$_field-name: 'TextField';

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

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

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

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

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

    &[type='email'],
    &[type='number'],
    &[type='password'],
    &[type='search'],
    &[type='tel'],
    &[type='text'],
    &[type='url'] {
        appearance: none;
    }

    // 1.
    &[type='number'] {
        --text-field-arrows-width: #{theme.$input-number-arrows-width};
    }

    // 2.
    &[size] {
        width: calc(
            var(--text-field-input-width) + 2 * #{form-fields-theme.$box-field-input-padding-x} + 2 * #{form-fields-theme.$box-field-input-border-width} +
                var(--text-field-arrows-width, 0px)
        );
    }

    // 3.
    @each $size in theme.$input-size-characters {
        &[size='#{$size}'] {
            --text-field-input-width: #{$size}ch;
        }
    }
}

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

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

.TextField__passwordToggle > .TextField__input {
    flex-grow: 1;
    padding-right: 0;
    border-color: transparent;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

// 4.
.TextField__passwordToggle__button {
    @include reset.button();

    display: flex;
    align-items: center;
    justify-content: center;
    padding: theme.$input-password-toggle-padding;
    color: form-fields-theme.$box-field-input-color-state-default;
    border-radius: 0 form-fields-theme.$box-field-input-border-radius form-fields-theme.$box-field-input-border-radius 0;
    background-color: form-fields-theme.$input-background-color;

    // 5.
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        border: form-fields-theme.$box-field-input-border-width form-fields-theme.$box-field-input-border-style
            form-fields-theme.$input-border-color;
        border-radius: form-fields-theme.$box-field-input-border-radius;
        pointer-events: none;
    }
}

// 6.
.TextField__passwordToggle > .TextField__input:focus-visible,
.TextField__passwordToggle__button:focus-visible {
    outline: 0;
}

.TextField__input:hover + .TextField__passwordToggle__button {
    background-color: form-fields-theme.$input-background-color-state-hover;
}

.TextField__input:active + .TextField__passwordToggle__button,
.TextField__input:focus-within + .TextField__passwordToggle__button {
    background-color: form-fields-theme.$input-background-color-state-active;
}

.TextField__passwordToggle__icon {
    pointer-events: none;
}

.TextField__passwordToggle__icon--hidden,
.TextField__passwordToggle__button[aria-pressed='true'] > .TextField__passwordToggle__icon--shown {
    display: block;
}

// stylelint-disable-next-line no-descending-specificity -- 7.
.TextField__passwordToggle__icon--shown,
.TextField__passwordToggle__button[aria-pressed='true'] > .TextField__passwordToggle__icon--hidden {
    display: none;
}

// stylelint-disable selector-max-specificity, selector-max-class, selector-max-compound-selectors -- 8.
.TextField > .TextField__input:focus-visible,
.TextField > .TextField__passwordToggle > .TextField__input:focus-visible ~ .TextField__passwordToggle__button::before {
    @include form-fields-tools.box-field-focus-visible();
}
// stylelint-enable selector-max-specificity, selector-max-class, selector-max-compound-selectors

// 9.
.TextField__passwordToggle__button:focus-visible::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: (2 * theme.$input-password-toggle-padding) + theme.$input-password-toggle-icon-size;
    height: 100%;
    border-radius: form-fields-theme.$box-field-input-border-radius;
    box-shadow: form-fields-theme.$input-focus-shadow;
}

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

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

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

.TextField--disabled > .TextField__label {
    @include form-fields-tools.label-disabled();
}

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

// stylelint-disable no-descending-specificity, selector-max-specificity, selector-max-class, selector-max-compound-selectors -- 10.
.TextField > .TextField__passwordToggle > .TextField__input:disabled,
:is(.TextField--disabled, .TextField.is-disabled) > .TextField__passwordToggle > .TextField__input {
    border-color: transparent;
}

.TextField > .TextField__input:disabled,
:is(.TextField--disabled, .TextField.is-disabled) > .TextField__input,
.TextField .TextField__passwordToggle .TextField__input:disabled ~ .TextField__passwordToggle__button::before,
:is(.TextField--disabled, .TextField.is-disabled)
    .TextField__passwordToggle
    .TextField__passwordToggle__button::before {
    border-color: form-fields-theme.$input-border-color-state-disabled;
}

.TextField .TextField__input:disabled ~ .TextField__passwordToggle__button,
:is(.TextField--disabled, .TextField.is-disabled) .TextField__passwordToggle__button {
    @include form-fields-tools.input-disabled();

    background-color: form-fields-theme.$input-background-color-state-disabled;
    pointer-events: none;
    cursor: cursors.$disabled;
}
// stylelint-enable

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

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