@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: 0rem;
    }

    .stack--padding-1 {
        padding: 0.25rem;
    }

    .stack--padding-2 {
        padding: 0.5rem;
    }

    .stack--padding-4 {
        padding: 1rem;
    }

    .stack--padding-8 {
        padding: 2rem;
    }

    .stack--padding-16 {
        padding: 4rem;
    }

    .stack--padding-safe {
        padding-block: 2rem;
        padding-inline: 1rem;
    }

    .stack--spacing-0 {
        gap: 0rem;
    }

    .stack--spacing-1 {
        gap: 0.25rem;
    }

    .stack--spacing-2 {
        gap: 0.5rem;
    }

    .stack--spacing-4 {
        gap: 1rem;
    }

    .stack--spacing-8 {
        gap: 2rem;
    }

    .stack--spacing-16 {
        gap: 4rem;
    }

    /* 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;
    }
}