@use "../../styles/tools/form-fields/box-field-elements";
@use "../../styles/tools/form-fields/box-field-layout";
@use "../../styles/tools/form-fields/box-field-sizes";
@use "../../styles/tools/form-fields/foundation";
@use "../../styles/tools/form-fields/variants";
@use "../../styles/tools/accessibility";

@layer components.text-area {
    // Foundation
    .root {
        @include foundation.root();
    }

    .label {
        @include foundation.label();
    }

    .inputContainer {
        @include box-field-elements.input-container();
    }

    .input {
        @include box-field-elements.input();
        @include box-field-elements.input-textarea();
    }

    .bottomLine {
        @include box-field-elements.bottom-line();
    }

    .helpText,
    .validationText {
        @include foundation.help-text();
    }

    .isRootRequired .label {
        @include foundation.label-required();
    }

    // Visual variants
    .isRootVariantFilled {
        @include variants.visual(box, $variant: filled);
    }

    .isRootVariantOutline {
        @include variants.visual(box, $variant: outline);
    }

    // States
    .isRootStateInvalid {
        @include variants.validation(invalid);
    }

    .isRootStateValid {
        @include variants.validation(valid);
    }

    .isRootStateWarning {
        @include variants.validation(warning);
    }

    // Invisible label
    .isLabelHidden {
        @include accessibility.hide-text();
    }

    // Layouts
    .isRootLayoutVertical,
    .isRootLayoutHorizontal {
        @include box-field-layout.vertical();
    }

    .isRootLayoutHorizontal {
        @include box-field-layout.horizontal();
    }

    .isRootFullWidth {
        @include box-field-layout.full-width();
    }

    .isRootInFormLayout {
        @include box-field-layout.in-form-layout();
    }

    // Sizes
    .isRootSizeSmall {
        @include box-field-sizes.size(small, $is-multiline: true);
    }

    .isRootSizeMedium {
        @include box-field-sizes.size(medium, $is-multiline: true);
    }

    .isRootSizeLarge {
        @include box-field-sizes.size(large, $is-multiline: true);
    }
}