/* Indux Dialogs */

@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(dialog[popover], .dialog) {
        position: fixed;
        left: 0;
        right: 0;
        width: 500px;
        flex-direction: column;
        max-width: 100%;
        min-height: 200px;
        max-height: 90vh;
        margin: auto;
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        background-color: var(--color-popover-surface, oklch(100% 0 0));
        border: 0 none;
        border-radius: calc(var(--radius, 0.5rem) * 2);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

        &::backdrop {
            background-color: rgba(0, 0, 0, 0.2);
        }

        /* Set layout for common children */
        & :where(header, main, footer) {
            padding: calc(var(--spacing, 0.25rem) * 4);
        }

        /* Push header content apart */
        & :where(header) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: calc(var(--spacing, 0.25rem) * 4)
        }

        /* Push footer to bottom */
        & :where(main) {
            flex-grow: 1
        }

        /* Push footer content to end */
        & :where(footer) {
            display: flex;
            justify-content: end;
            align-items: center;
            gap: calc(var(--spacing, 0.25rem) * 2);
            margin-top: auto
        }

        /* Turn dialog into alert prompt on mobile */
        @media screen and (max-width: 768px) {
            width: calc(100vw - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important;
            max-height: calc(100vh - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important;
            margin: auto !important
        }
    }

    /* Utility class additions */
    :where(.dialog) {
        inset: 0;
        z-index: 10;
        height: fit-content
    }

    /* Dark mode override */
    .dark :where(dialog)::backdrop {
        background-color: rgba(0, 0, 0, 0.35)
    }

    /* Hide dropdowns when dialogs are open */
    html:has(dialog:popover-open) {

        /* Hide dropdowns outside of any dialog */
        & menu[popover]:not(dialog *) {
            opacity: 0;
            scale: .9;
            pointer-events: none;
            transition: opacity .15s ease-out, scale .15s ease-out;

            &:popover-open {
                display: flex !important;
            }
        }
    }

    /* When multiple dialogs are open, hide dropdowns in all but closest dialog */
    html:has(dialog:popover-open ~ dialog:popover-open) {
        & dialog:popover-open:not(:last-of-type) menu[popover] {
            opacity: 0;
            scale: .9;
            pointer-events: none;
            transition: opacity .15s ease-out, scale .15s ease-out;

            &:popover-open {
                display: flex !important;
            }
        }
    }
}