/* Manifest Sidebars */

@layer base, components, utilities;

/* mnfst:popover-base:start — self-contained so this stylesheet works on
   its own; the build strips it from manifest.css. Edit styles/snippets/manifest.popover.css. */
[popover]:not(.unstyle):not(:popover-open) {
    display: none;
}

@layer base {

    /* Animates `scale`, not `transform`. With fill mode `both` a transform
       animation keeps its final value forever, which silently overrides any
       transform an author put on a popover — so a menu positioned with
       translate(-50%) simply would not move. The standalone property leaves
       transform free. */
    @keyframes mnfst-popover-in {
        from {
            scale: .9
        }

        to {
            scale: 1
        }
    }

    :where([popover]):not(.unstyle):popover-open {
        display: flex;
        animation: mnfst-popover-in .15s ease-in both
    }
}
/* mnfst:popover-base:end */



@layer components {

    :where(nav[popover]) {
        inset-inline-start: auto;
        inset-inline-end: 0;
        width: fit-content;
        min-width: 20vw;
        max-width: 80vw;
        height: 100%;
        overflow-y: auto;
        z-index: 200;
        background-color: var(--color-popover-surface, oklch(98.5% 0 0));
        /* Opt out of the base scale-pop; sidebars slide instead. */
        animation: none;
        transition: opacity .15s ease-in, transform .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        /* Opening state - slide in from inline-end */
        @starting-style {
            transform: translateX(100%);
            opacity: 1;
            scale: 1
        }

        /* Closing state - slide out to inline-end */
        &:not(:popover-open) {
            transform: translateX(100%);
            opacity: 1;
            scale: 1
        }

        /* RTL overrides - slide in from left in RTL context */
        [dir=rtl] & {
            @starting-style {
                transform: translateX(-100%)
            }

            &:not(:popover-open) {
                transform: translateX(-100%)
            }
        }
    }

    :where(nav[popover].appear-start) {
        inset-inline-start: 0;
        inset-inline-end: auto;

        @starting-style {
            transform: translateX(-100%)
        }

        &:not(:popover-open) {
            transform: translateX(-100%)
        }

        /* RTL overrides */
        [dir=rtl] & {
            @starting-style {
                transform: translateX(100%)
            }

            &:not(:popover-open) {
                transform: translateX(100%)
            }
        }
    }

    /* Dark mode override */
    .dark :where(nav[popover]) {
        background-color: var(--color-surface-1, oklch(97% 0 0))
    }
}