@fields-space: 1.25rem;
@fields-space-mobile: 1rem;
@fields-space-large: 2rem;
@fields-space-large-mobile: 1.5rem;

.tui-form {
    &__header {
        font: var(--tui-typography-heading-h5);
        margin-block-start: @fields-space-large;
        margin-block-end: @fields-space;

        @media @tui-mobile {
            font: var(--tui-typography-body-l);
            font-weight: bold;
            margin-block-end: @fields-space-mobile;
        }

        // TODO: drop in v5
        &_margin-top_none,
        &_margin-block-start_none {
            margin-block-start: 0;
        }

        // TODO: drop in v5
        &_margin-bottom_none,
        &_margin-block-end_none {
            margin-block-end: 0;
        }

        // TODO: drop in v5
        &_margin-bottom_small,
        &_margin-block-end_small {
            margin-block-end: @fields-space - 0.25rem;

            @media @tui-mobile {
                margin-block-end: @fields-space-mobile - 0.25rem;
            }
        }
    }

    &__row {
        margin-block-start: @fields-space;

        &:first-child {
            margin-block-start: 0;
        }

        &_multi-fields {
            display: flex;

            @media @tui-mobile {
                flex-wrap: wrap;
            }
        }

        &_half-width {
            inline-size: ~'calc(50% - (@{fields-space} / 2))';

            @media @tui-mobile {
                inline-size: 100%;
            }
        }

        &_checkboxes {
            display: flex;
            flex-wrap: wrap;
        }

        @media @tui-mobile {
            margin-block-start: @fields-space-mobile;
        }
    }

    &__multi-field {
        flex: 1 1 0;
        min-inline-size: 0;
        margin-inline-start: @fields-space;

        &:first-child {
            margin-inline-start: 0;
        }

        @media @tui-mobile {
            flex-basis: 100%;
            margin-block-start: @fields-space-mobile;
            margin-inline-start: 0;

            &:first-child {
                margin-block-start: 0;
            }
        }
    }

    &__field-note {
        font: var(--tui-typography-body-s);
        margin-block-start: 0.25rem;
        color: var(--tui-text-secondary);
    }

    &__field-checkbox {
        margin-block-start: 0.5rem;
    }

    &__checkbox {
        flex: ~'1 1 calc(50% - 0.625rem)';

        &:nth-child(even) {
            margin-inline-start: 1.25rem;
        }

        &:nth-child(n + 3) {
            margin-block-start: 1rem;
        }
    }

    &__buttons {
        display: flex;
        margin-block-start: @fields-space-large;

        &_align_end {
            justify-content: flex-end;
        }

        &_align_center {
            justify-content: center;
        }

        @media @tui-mobile {
            flex-direction: column;
            margin-block-start: @fields-space-large-mobile;
        }
    }

    &__button {
        margin-inline-start: 0.75rem;

        &:first-child {
            margin-inline-start: 0;
        }

        @media @tui-mobile {
            margin-block-start: 0.5rem;
            margin-inline-start: 0;
        }
    }
}