/*
 * <x-stack>: its children one under another, in a pane.
 *
 * A flex column, stretched across the stack's width unless `data-md-align` says `start`, `center`
 * or `end` — except a button, which keeps its label's width at the start edge: M3 keeps a button's
 * width "dynamic to fit label" and says not to "stretch buttons into long flat shapes on large
 * windows" (docs/reference/m3/components-actions-communication-containment.md § Buttons). An
 * application's own width or `align-self` on it still wins. The space between the children is `--md-gap` (spacing.css), one of M3's spacing
 * tokens and none by default; M3 groups with proximity, so the gap is the grouping
 * (docs/reference/m3/foundations.md § Layout → Grids & spacing). M3 defines no in-pane arrangement
 * component; this is the neutral one, beside <x-row> and <x-grid>.
 *
 * In `material.layout`; `hide-below`/`hide-from` come from visibility.css.
 */

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

@import './spacing.css';
@import './visibility.css';

@layer material.layout {
    :where([data-md-stack]) {
        --md-gap: 0px;
    }

    [data-md-stack] {
        display: flex;
        flex-direction: column;
        gap: var(--md-gap);
    }

    [data-md-stack]:is(:not([data-md-align]), [data-md-align='stretch']) > [data-md-button] {
        align-self: start;
    }

    [data-md-stack][data-md-align='start'] {
        align-items: flex-start;
    }

    [data-md-stack][data-md-align='center'] {
        align-items: center;
    }

    [data-md-stack][data-md-align='end'] {
        align-items: flex-end;
    }
}