@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.select-field {
    // 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-select();
        @include box-field-elements.input-select-option();
    }

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

    .caretIcon {
        @include box-field-elements.caret-icon();
    }

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

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

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

    // Variants
    .isRootVariantFilled {
        @include variants.visual(box, $variant: filled, $has-caret: true);
    }

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

    // 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);
    }

    .isRootSizeMedium {
        @include box-field-sizes.size(medium);
    }

    .isRootSizeLarge {
        @include box-field-sizes.size(large);
    }

    // Groups
    .isRootGrouped {
        @include box-field-elements.in-group-layout();
    }
}