/*@example <div is="form-row"><label>Name</label><input is="input"></div>*/
@layer component {
    [is=form-row] {
        display: grid;
        grid-template-columns: 30% 1fr;
        align-items: center;
        gap: var(--space-xs);
        margin-bottom: var(--space-s);

        &:has(> [is=form-column]) {
            display: flex;
            flex-wrap: wrap;

            > label {
                flex: 0 0 30%;
                max-width: 30%;
            }

            > [is=form-column] {
                flex: 1 1 0;
            }

            > [is=validation] {
                flex: 0 0 calc(70% - var(--space-xs));
                margin-left: auto;
            }
        }

        & [is=validation] {
            grid-column: 2;
        }

        &[has~=full-size] {
            grid-template-columns: 100%;

            > *:first-child {
                grid-column: 1 / -1;
            }

            &:has(> [is=form-column]) {
                > label,
                > [is=validation] {
                    flex-basis: 100%;
                    max-width: none;
                    margin-left: 0;
                }
            }
        }

        &[has~=control-label-layout] {
            grid-template-columns: 100%;
            align-items: start;

            > label {
                display: flex;
                align-items: center;
                gap: var(--space-xs);
                grid-column: 1 / -1;
                width: 100%;

                > :is(input[type=checkbox], input[type=radio], [is=checkbox], [is=toggle], [is=switch]) {
                    flex: 0 0 auto;
                    order: -1;
                }
            }

            &[has~=right-position] {
                > label {
                    > :is(input[type=checkbox], input[type=radio], [is=checkbox], [is=toggle], [is=switch]) {
                        margin-left: auto;
                        order: 1;
                    }
                }
            }

            > [is=validation] {
                grid-column: 1 / -1;
            }
        }
    }

    [is=form][has~=full-width-labels] {
        & [is=form-row] {
            grid-template-columns: 100%;
            align-items: start;

            & > * {
                grid-column: 1 / -1;
            }

            & > :not(label):not([is=validation]):not([is=toggle]):not([is=checkbox]) {
                width: 100%;
            }

            & [is=validation] {
                grid-column: 1 / -1;
            }

            &:has(> [is=form-column]) {
                display: flex;
                flex-wrap: wrap;

                & > label,
                & > [is=validation] {
                    flex-basis: 100%;
                    max-width: none;
                    margin-left: 0;
                }

                & > [is=form-column] {
                    flex: 1 1 0;
                }
            }
        }
    }
}