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

$_field-name: 'FieldGroup';

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

    border: 0;
}

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

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

.FieldGroup__fields {
    display: grid;
    row-gap: theme.$gap;
}

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

.FieldGroup:not(.FieldGroup--fluid) .FieldGroup__fields {
    justify-content: start;
}

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

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

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

.FieldGroup[disabled] > .FieldGroup__label {
    @include form-fields-tools.label-disabled();
}

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

.FieldGroup[disabled] > .FieldGroup__helperText {
    @include form-fields-tools.helper-text-disabled();
}
