/* Indux Sidebars */

@layer base {

    /* Base popover styles */
    :where([popover]) {
        display: none;
        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        &:popover-open {
            display: flex
        }

        /* Opening state */
        @starting-style {
            scale: .9;
            opacity: 0
        }

        /* Closing state */
        &:not(:popover-open) {
            display: none !important;
            scale: 1;
            opacity: 0;
            transition-duration: .15s;
            transition-timing-function: ease-out
        }
    }
}

@layer components {

    :where(aside[popover]) {
        inset-inline-start: auto;
        inset-inline-end: 0;
        width: fit-content;
        min-width: 20vw;
        max-width: 80vw;
        max-width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 200;
        background-color: var(--color-popover-surface, oklch(100% 0 0));
        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(aside[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(aside[popover]) {
        background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
    }
}