@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(
            .list,
            .card,
            .inset-grouped,
            .section,
            .field,
            .text-field,
            .table,
            .chart,
            .grid,
            .stack,
            .prose,
            .toc,
            .tabs,
            .shelf,
            .disclosure,
            .navigation-stack,
            .rich-text,
            .content-unavailable,
            .toggle,
            :has(.spacer),
            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--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);
    }

    /* A depth stack: every child occupies the same grid cell, so they overlay
       one another. The container sizes to the largest child; `alignment` places
       the rest. */
    .zstack {
        display: grid;
    }

    .zstack > * {
        grid-area: 1 / 1;
    }

    .zstack--alignment-center {
        place-items: center;
    }

    .zstack--alignment-top {
        place-items: start center;
    }

    .zstack--alignment-bottom {
        place-items: end center;
    }

    .zstack--alignment-leading {
        place-items: center start;
    }

    .zstack--alignment-trailing {
        place-items: center end;
    }

    .zstack--alignment-top-leading {
        place-items: start start;
    }

    .zstack--alignment-top-trailing {
        place-items: start end;
    }

    .zstack--alignment-bottom-leading {
        place-items: end start;
    }

    .zstack--alignment-bottom-trailing {
        place-items: end end;
    }
}