@use '../styles/common/tokens' as *;

@mixin kbq-form-geometry() {
    .kbq-form {
        display: flex;
        flex-direction: column;
    }

    .kbq-form__row {
        display: flex;
        flex-direction: row;
    }

    .kbq-form-horizontal {
        --kbq-forms-horizontal-label-padding-top: var(--kbq-size-xs);

        & .kbq-form-row_margin {
            margin-bottom: var(--kbq-forms-size-horizontal-row-margin-bottom);
        }

        & .kbq-form__label {
            padding-top: var(--kbq-forms-horizontal-label-padding-top);

            text-align: start;
        }

        & .kbq-form__row:has(.kbq-toggle, .kbq-radio-group, .kbq-checkbox, .kbq-multiple-file-upload) {
            --kbq-forms-horizontal-label-padding-top: 0;
        }

        & .kbq-form__row:has(.kbq-single-file-upload) {
            --kbq-forms-horizontal-label-padding-top: var(--kbq-size-m);
        }

        & .kbq-form__control {
            padding-left: var(--kbq-forms-size-horizontal-control-padding-left);
        }

        & .kbq-form__legend {
            margin-top: var(--kbq-forms-size-horizontal-legend-margin-top);
            margin-bottom: var(--kbq-forms-size-horizontal-legend-margin-bottom);
        }
    }

    .kbq-form-vertical {
        & .kbq-form__row {
            flex-direction: column;
        }

        & .kbq-form-row_margin {
            margin-bottom: var(--kbq-forms-size-vertical-row-margin-bottom);
        }

        & .kbq-form__label {
            padding-top: var(--kbq-forms-size-vertical-label-padding-top);
            padding-bottom: var(--kbq-forms-size-vertical-label-padding-bottom);

            text-align: start;
        }

        & .kbq-form__control {
            padding-left: 0;
        }

        & .kbq-form__legend {
            margin-top: var(--kbq-forms-size-vertical-legend-margin-top);
            margin-bottom: var(--kbq-forms-size-vertical-legend-margin-bottom);
        }
    }

    .kbq-form__fieldset {
        display: flex;
        flex-direction: column;
    }

    .kbq-form__fieldset.kbq-horizontal {
        flex-direction: row;

        & .kbq-form__row:not(:first-child) {
            padding-left: var(--kbq-forms-size-vertical-control-padding-left);
        }
    }
}