@layer components {
    .navigation-stack {
        --navigation-stack-background: light-dark(
            oklch(95% 0% 0deg),
            oklch(10% 0% 0deg)
        );
        --navigation-stack-padding-block-end: max(
            2rem,
            var(--vertical-safe-space),
            var(--safe-space-inset-block-end, 0px),
            var(--navigation-stack-inset-block-end, 0px)
        );
        block-size: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
        position: relative;
    }

    .navigation-stack > .navigation-bar {
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
    }

    .navigation-stack::before {
        background: linear-gradient(
            var(--navigation-stack-background),
            transparent
        );
        content: "";
        grid-column: 1;
        grid-row: 1;
        pointer-events: none;
        z-index: 1;
    }

    .navigation-stack::after {
        background: linear-gradient(
            transparent,
            var(--navigation-stack-background)
        );
        content: "";
        grid-column: 1;
        grid-row: 3;
        pointer-events: none;
        z-index: 1;
    }

    .navigation-stack--scroll-edge-none::before,
    .navigation-stack--scroll-edge-none::after {
        content: none;
    }

    .navigation-stack__content {
        display: flex;
        flex-direction: column;
        grid-column: 1;
        grid-row: 1 / 4;
        overflow: auto;
        overscroll-behavior: contain;
        padding-block-start: var(--navigation-stack-inset-block-start, 0px);
        padding-block-end: var(--navigation-stack-padding-block-end);
        position: relative;
    }

    .navigation-stack__content > * {
        flex-shrink: 0;
    }

    .navigation-stack__bottom {
        grid-column: 1;
        grid-row: 3;
        padding-block: 1rem 1.5rem;
        padding-inline: var(--horizontal-safe-space);
        z-index: 2;
    }
}