.side-sheet {
    position: fixed;
    inset-block: 0 auto;
    inset-inline: 0 auto;
    margin: 0;
    inline-size: 90dvi;
    block-size: 100dvh;
    border: none;
    box-shadow: var(--facet-shadow);
    overflow-y: auto;
    padding: 1.5rem;
    background-color: var(--dark);
    color: white;

    &:popover-open {
        display: grid;
        gap: 1rem;
        align-content: start;
    }

    & > h2 {
        margin-block: 0;
        text-align: center;
    }

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

.side-sheet--end { inset-inline: auto 0 }

@media (prefers-reduced-motion: no-preference) {
    .side-sheet {
        transition:
            translate var(--transition-duration) var(--transition-timing),
            display var(--transition-duration) allow-discrete,
            overlay var(--transition-duration) allow-discrete;
        translate: -100% 0;

        &:popover-open {
            translate: 0 0;
            @starting-style { translate: -100% 0 }
        }

        &::backdrop {
            opacity: 0;
            transition:
                opacity var(--transition-duration) var(--transition-timing),
                overlay var(--transition-duration) allow-discrete,
                display var(--transition-duration) allow-discrete;
            @starting-style { opacity: 0 }
        }

        &:popover-open::backdrop { opacity: 1 }
    }

    .side-sheet--end {
        translate: 100% 0;
        &:popover-open { @starting-style { translate: 100% 0 } }
    }
}