@layer components {
    .navigation-stack {
        --navigation-bar-block-size: var(--safe-area-block-start);

        --navigation-stack-padding-block-start: var(
            --navigation-bar-block-size
        );

        --navigation-stack-padding-block-end: max(
            1rem,
            var(--safe-area-block-end),
            var(--navigation-stack-bottom-block-size, 0rem)
        );

        --navigation-stack-scroll-edge-blur: 1rem;
        --navigation-stack-scroll-edge-extent: 0rem;
        --navigation-stack-scroll-edge-material: light-dark(
            oklch(98% 0% 0deg / 60%),
            oklch(20% 0% 0deg / 50%)
        );

        block-size: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
        position: relative;
    }

    /* The bar's row is as tall as the space the content reserves for it,
       so the scroll edge covers the whole bar. An inline title with no
       toolbar is positioned out of flow, which would otherwise leave the
       row only as tall as its padding. */
    .navigation-stack > .navigation-bar {
        grid-column: 1;
        grid-row: 1;
        min-block-size: var(--navigation-bar-block-size);
        transition:
            opacity 0.3s ease,
            translate 0.3s ease;
        z-index: 2;
    }

    .navigation-stack--toolbar-visibility-hidden > .navigation-bar {
        opacity: 0;
        pointer-events: none;
        translate: 0 -100%;
    }

    .navigation-stack__edge {
        backdrop-filter: blur(
            calc(
                var(--navigation-stack-scroll-edge-blur) *
                    var(--navigation-stack-scroll-edge-progress)
            )
        );
        background-color: var(--navigation-stack-scroll-edge-material);
        grid-column: 1;
        opacity: var(--navigation-stack-scroll-edge-progress);
        pointer-events: none;
        z-index: 1;
    }

    .navigation-stack__edge--top {
        --navigation-stack-scroll-edge-progress: var(
            --navigation-stack-scroll-edge-start-progress,
            0
        );

        grid-row: 1;
        margin-block-end: calc(-1 * var(--navigation-stack-scroll-edge-extent));
    }

    .navigation-stack__edge--bottom {
        --navigation-stack-scroll-edge-progress: var(
            --navigation-stack-scroll-edge-end-progress,
            0
        );

        grid-row: 3;
        margin-block-start: calc(
            -1 * var(--navigation-stack-scroll-edge-extent)
        );
    }

    .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-padding-block-start);
        padding-block-end: var(--navigation-stack-padding-block-end);
        position: relative;
    }

    .navigation-stack:has(> .navigation-bar) {
        --navigation-bar-block-size: calc(
            var(--safe-area-block-start) + 2 * var(--edge-spacing-block)
        );
    }

    /* An inline title with no toolbar still needs its row: the heading
       sits in a toolbar-height row, so reserve it rather than let the title
       overlap the content. */
    .navigation-stack--title-display-mode-inline:has(
            > .navigation-bar > .navigation-bar__heading
        ) {
        --navigation-bar-block-size: calc(
            var(--safe-area-block-start) + var(--toolbar-block-size) + 2 *
                var(--edge-spacing-block)
        );
    }

    .navigation-stack:has(.navigation-bar > .toolbar) {
        --navigation-bar-block-size: calc(
            var(--safe-area-block-start) + var(--toolbar-block-size) + 2 *
                var(--edge-spacing-block)
        );
    }

    .navigation-stack__content > * {
        --safe-area-block-start: 0rem;
        --safe-area-block-end: 0rem;

        flex-shrink: 0;
    }

    .navigation-stack__content:has(
            > :first-child:is(
                    .ignores-safe-area--top,
                    .ignores-safe-area--vertical
                )
        ) {
        padding-block-start: 0rem;
    }

    .navigation-stack__content
        > :first-child:is(
            .ignores-safe-area--top,
            .ignores-safe-area--vertical
        ) {
        --safe-area-block-start: var(--navigation-stack-padding-block-start);
    }

    .navigation-stack__content:has(
            > :last-child:is(
                    .ignores-safe-area--bottom,
                    .ignores-safe-area--vertical
                )
        ) {
        padding-block-end: 0rem;
    }

    .navigation-stack__content
        > :last-child:is(
            .ignores-safe-area--bottom,
            .ignores-safe-area--vertical
        ) {
        --safe-area-block-end: var(--navigation-stack-padding-block-end);
    }

    .navigation-stack__bottom {
        grid-column: 1;
        grid-row: 3;
        padding-block: 1rem calc(var(--safe-area-block-end) + 1.5rem);
        padding-inline: calc(
                var(--safe-area-inline-start) + var(--edge-spacing-inline)
            )
            calc(var(--safe-area-inline-end) + var(--edge-spacing-inline));
        z-index: 2;
    }
}

@layer components {
    @media print {
        .navigation-stack {
            block-size: auto;
            display: block;
        }

        .navigation-stack__content {
            overflow: visible;
            padding-block: 0;
        }

        .navigation-stack__edge {
            display: none;
        }
    }
}