.off-canvas {
    --off-canvas-from: -100%;

    @container site (width < 54rem) {
        position: fixed;
        z-index: 3;
        inset-block: 0;
        inset-inline: 0 auto;
        margin: 0;
        inline-size: 20rem;
        block-size: 100dvh;
        border: 0;
        border-inline-end: 1px solid transparent;
        padding: 1.5rem 0;
        overflow-y: auto;
        translate: var(--off-canvas-from) 0;

        &:popover-open { translate: 0 }

        &:popover-open::backdrop { background-color: var(--popover-backdrop-color) }

        &::backdrop { background-color: transparent }

        @starting-style {
            &:popover-open { translate: var(--off-canvas-from) 0 }

            &:popover-open::backdrop { background-color: transparent }
        }

        @media (prefers-reduced-motion: no-preference) {
            transition:
                translate var(--transition-duration) var(--transition-timing),
                display var(--transition-duration) allow-discrete,
                overlay var(--transition-duration) allow-discrete;

            &::backdrop {
                transition:
                    background-color var(--transition-duration) var(--transition-timing),
                    display var(--transition-duration) allow-discrete,
                    overlay var(--transition-duration) allow-discrete;
            }
        }
    }

    @container site (width < 23rem) { inline-size: 100% }

    @container site (width >= 54rem) {
        position: static;
        inset: auto;
        margin: 0;
        display: grid;
        inline-size: auto;
        block-size: auto;
        border: 0;
        padding: 0;
        overflow: visible;
    }

    &:popover-open { pointer-events: auto }
}

/* A popover's ::backdrop is not hit-tested: without this, the tap that light-dismisses a panel also activates what lies beneath. */
body:has(.off-canvas:popover-open) { pointer-events: none }

.off-canvas--end {
    --off-canvas-from: 100%;

    @container site (width < 54rem) {
        inset-inline: auto 0;
        border-inline-end: 0;
        border-inline-start: 1px solid transparent;
    }
}