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

@layer components.form-layout {
    // Foundation
    .root {
        @include box-field-layout.in-form-layout();
        @include variants.visual(custom);
    }

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

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

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

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

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

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

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

    .isRootLayoutVertical .field,
    .isRootLayoutHorizontal .field {
        width: auto;
    }

    .isRootFullWidth .field {
        justify-self: stretch;
    }

    // Sizes
    .isRootSizeSmall {
        @include box-field-sizes.size(small);
    }

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

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