@layer components {
    .stack {
        display: flex;
        flex-grow: 0;
    }

    .stack--direction-row {
        flex-direction: row;
    }

    .stack--direction-column {
        flex-direction: column;
    }

    /* As in SwiftUI, a stack centres its children on the cross axis unless
       `alignment` says otherwise, and a child keeps its own size: a button
       hugs its label. Views that take the width they're offered — lists,
       forms and fields, toggles, tables, charts, grids, prose, nested stacks,
       and anything holding a spacer — still fill a column stack, whatever
       its alignment, as greedy views do. A paragraph or heading hugs its
       text like a SwiftUI Text, so it centres in a centred stack and fills
       a leading one. `frame({ maxWidth: "infinity" })` makes any child
       fill. */
    .stack--direction-row,
    .stack--direction-column {
        align-items: center;
    }

    .stack--direction-column
        > :is(
            .stack__fill,
            form,
            input,
            textarea,
            select,
            pre,
            ul,
            ol,
            dl,
            blockquote,
            table,
            details,
            hr,
            nav,
            section,
            article,
            header,
            footer,
            main,
            aside
        ) {
        align-self: stretch;
    }

    .stack--direction-column > .stack__expand {
        flex-grow: 1;
    }

    .stack__share {
        flex: 1 1 5rem;
        inline-size: auto;
        min-inline-size: 3rem;
    }

    .stack--direction-column.stack--alignment-leading
        > :is(p, h1, h2, h3, h4, h5, h6) {
        align-self: stretch;
    }

    .stack--alignment-leading {
        align-items: start;
    }

    .stack--alignment-center {
        align-items: center;
    }

    .stack--alignment-trailing {
        align-items: end;
    }

    .stack--distribution-leading {
        justify-content: start;
    }

    .stack--distribution-center {
        justify-content: center;
    }

    .stack--distribution-trailing {
        justify-content: end;
    }

    .stack--distribution-space-between {
        justify-content: space-between;
    }

    .stack--distribution-space-around {
        justify-content: space-around;
    }

    .stack--distribution-space-evenly {
        justify-content: space-evenly;
    }

    .stack--spacing-0 {
        gap: var(--spacing-0);
    }

    .stack--spacing-1 {
        gap: var(--spacing-1);
    }

    .stack--spacing-2 {
        gap: var(--spacing-2);
    }

    .stack--spacing-4 {
        gap: var(--spacing-4);
    }

    .stack--spacing-8 {
        gap: var(--spacing-8);
    }

    .stack--spacing-16 {
        gap: var(--spacing-16);
    }
}

@layer utilities {
    .stack__grow {
        flex: 1 1 0;
        min-inline-size: 0;
    }

    .stack__grow-block {
        flex: 1 1 0;
        min-block-size: 0;
    }
}