/*
 * <x-form>: its fields in one column, and its actions at the foot
 * (resources/views/components/form.blade.php).
 *
 * The column is a one-track grid whose track is `minmax(0, 1fr)`: a bare grid's implicit column
 * floors at its content's min-content, so on a phone a wide field would push the form past its
 * pane. Rows take their content's height. 16px (`space200`) between fields, because a text field
 * floats its label half above its outline and any less lets the hint under one field run into the
 * label of the next.
 *
 * The actions wrap, end-aligned, 8px (`space100`) apart — M3's gap between buttons in a row. A
 * caller's class on the `actions` slot lands on the row and outranks this layer.
 *
 *   [data-md-form]            the <form>
 *     [data-md-form-actions]  the row of actions, under the divider when `separator` asks for one
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

/* TODO(step 36): @import './divider.css' once <x-divider> leaves Tailwind (containment stream). */

@layer material.components {
    [data-md-form] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: min-content;
        gap: var(--md-sys-measurement-space200);
    }

    [data-md-form-actions] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--md-sys-measurement-space100);
    }
}