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

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

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

    .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--padding-0 {
        padding: var(--spacing-0);
    }

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

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

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

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

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

    .stack--padding-safe {
        padding-block: var(--vertical-safe-space);
        padding-inline: var(--horizontal-safe-space);
    }

    .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;
    }
}