@layer components {
    :root {
        --inspector-width: min(26rem, 32vw);
    }

    /* The inspector column is opaque, like the sidebar: content surfaces
       never show what is behind them. */
    .navigation-split > dialog.inspector {
        background-color: var(--secondary-system-background);
        border: 0;
        color: inherit;
        display: flex;
        flex-direction: column;
        margin: 0;
        max-block-size: none;
        max-inline-size: none;
        padding: 0;
        position: relative;

        & > .navigation-stack {
            flex: 1 1 0;
            min-block-size: 0;
        }
    }

    .inspector__segments {
        --inspector-segment-thumb: light-dark(
            oklch(100% 0% 0deg),
            oklch(45% 0% 0deg)
        );
        --inspector-segment-shadow: light-dark(
            oklch(0% 0% 0deg / 15%),
            oklch(0% 0% 0deg / 45%)
        );
        --inspector-segment-divider: light-dark(
            oklch(0% 0% 0deg / 15%),
            oklch(100% 0% 0deg / 18%)
        );

        display: flex;
        align-items: center;
        block-size: var(--toolbar-block-size);
        padding: 0.25rem;
        border-radius: calc(var(--toolbar-block-size) / 2);
        overflow: clip;
    }

    .inspector__segment {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 4rem;
        block-size: 100%;
        padding: 0;
        border: 0;
        border-radius: calc(var(--toolbar-block-size) / 2 - 0.25rem);
        background-color: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
        transition:
            background-color 0.15s ease,
            box-shadow 0.15s ease;

        & svg {
            inline-size: 1.25rem;
            block-size: 1.25rem;
        }

        & + &::before {
            content: "";
            position: absolute;
            inset-block: 0.5rem;
            inset-inline-start: 0;
            border-inline-start: 0.0625rem solid
                var(--inspector-segment-divider);
        }

        &[aria-selected="true"]::before,
        &[aria-selected="true"] + &::before {
            border-color: transparent;
        }

        &[aria-selected="true"] {
            background-color: var(--inspector-segment-thumb);
            box-shadow: 0 0.0625rem 0.125rem var(--inspector-segment-shadow);
        }

        &:focus-visible {
            outline: 0.125rem solid var(--tint);
            outline-offset: -0.125rem;
        }
    }

    @media (min-width: 48rem) {
        .navigation-split > dialog.inspector .toolbar-item.inspector__close {
            display: none;
        }

        .navigation-split > dialog.inspector {
            block-size: auto;
            border-inline-start: 1px solid var(--hairline);
            flex: 0 0 var(--inspector-width);
            inset: auto;
            transition:
                margin 0.25s ease,
                visibility 0.25s;
        }

        .app[data-inspector-collapsed]
            > main.navigation-split
            > dialog.inspector {
            margin-inline-end: calc(-1 * var(--inspector-width));
            visibility: hidden;
        }
    }

    @media (max-width: 47.999rem) {
        /* A sheet with medium and large detents: drag the grabber or the
           bar to resize it, or down past medium to close it (inspector.js). */
        .navigation-split > dialog.inspector {
            --inspector-detent: 50dvh;

            block-size: var(--sheet-height, var(--inspector-detent));
            border-start-end-radius: 1.375rem;
            border-start-start-radius: 1.375rem;
            inline-size: 100%;
            inset-block: auto 0;
            inset-inline: 0;
            overflow: hidden;
            position: fixed;
            transform: translateY(100%);
            transition:
                block-size 0.3s ease,
                transform 0.25s ease,
                overlay 0.25s ease allow-discrete,
                display 0.25s ease allow-discrete;
        }

        .navigation-split > dialog.inspector[data-detent="large"] {
            --inspector-detent: calc(
                100dvh - var(--safe-area-block-start, 0rem) - 0.75rem
            );
        }

        .navigation-split > dialog.inspector[data-dragging] {
            transition: none;
        }

        .navigation-split > dialog.inspector > .sheet-grabber {
            display: block;
        }

        .navigation-split
            > dialog.inspector
            > .navigation-stack
            > .navigation-bar {
            touch-action: none;
        }

        .navigation-split > dialog.inspector:not([open]) {
            display: none;
        }

        .navigation-split > dialog.inspector[open] {
            transform: translateY(var(--sheet-offset, 0rem));
        }

        @starting-style {
            .navigation-split > dialog.inspector[open] {
                transform: translateY(100%);
            }
        }

        .navigation-split > dialog.inspector[open]::backdrop {
            background-color: var(--scrim);
            transition:
                background-color 0.25s ease,
                overlay 0.25s ease allow-discrete,
                display 0.25s ease allow-discrete;
        }

        @starting-style {
            .navigation-split > dialog.inspector[open]::backdrop {
                background-color: oklch(0% 0% 0deg / 0%);
            }
        }
    }

    .app[data-restoring] > main.navigation-split > dialog.inspector {
        transition: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .navigation-split > dialog.inspector {
            transition: none;
        }
    }
}

@layer components {
    @media print {
        .navigation-split > dialog.inspector {
            display: none;
        }
    }
}