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

$_field-name: 'TextArea';

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

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

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

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

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

    min-height: calc(
        #{theme.$input-min-height} + 2 * #{form-fields-theme.$box-field-input-padding-x} + 2 * #{form-fields-theme.$box-field-input-border-width}
    );
    resize: vertical;
}

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

.TextArea > .TextArea__input:focus-visible {
    @include form-fields-tools.box-field-focus-visible();
}

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

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

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

.TextArea--disabled > .TextArea__label {
    @include form-fields-tools.label-disabled();
}

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

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

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