/* Indux Dropdowns */

@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(menu[popover]) {
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        position-area: end span-end;
        inset: auto;
        flex-flow: column nowrap;
        gap: 0;
        width: fit-content;
        min-width: 160px;
        height: fit-content;
        max-height: 90vh;
        margin: var(--spacing-popover-offset, 0.5rem) 0;
        padding: 0.25rem;
        z-index: 50;
        list-style: none;
        background: var(--color-popover-surface, oklch(100% 0 0));
        border: 0 none;
        border-radius: var(--radius, 0.5rem);
        box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
        transform-origin: top center;
        overflow-x: hidden;

        /* Options */
        & :where(li, a, button, label) {
            display: inline-flex;
            justify-content: start;
            align-items: center;
            width: 100%;
            max-width: 100%;
            min-height: 2rem;
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            font-weight: normal;
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            text-align: start;
            text-decoration: none;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            background-color: transparent;
            border-radius: 6px;
            cursor: pointer;
            user-select: none;

            &:hover {
                color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                text-decoration: inherit;
                background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
            }

            &:active {
                color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
            }

            & span,
            & [x-icon] {
                color: inherit
            }

            /* Leading icons */
            & [x-icon]:first-child:not(:only-child) {
                margin-inline-end: 0.375rem
            }
        }

        /* Titles */
        & small {
            padding: 0.25rem 0.5rem;
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        }

        /* Horizontal rules (offset to ignore menu padding) */
        & hr {
            flex-shrink: 0;
            width: calc(100% + 0.25rem * 2);
            margin-inline-start: calc(0.25rem * -1);
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
            background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        }

        /* Labels */
        & label {
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            cursor: default;

            &:hover {
                background-color: transparent
            }

            &:has( input[role=switch]) {
                justify-content: space-between
            }
        }

        /* Inputs and textareas */
        & :where(input, textarea) {
            flex-shrink: 0;

            &:not(:first-child) {
                margin-top: var(--spacing, 0.25rem)
            }
        }

        /* Spans */
        & span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap
        }
    }

    /* Dark theme */
    :where(.dark menu[popover]) :where(li, a, button, label):hover {
        background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
    }

    /* Nested menu alignment */
    :where(menu menu) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Center alignment */
    :where(menu.center) {
        position-area: center;
    }

    /* Top alignment */

    :where(menu.top) {
        position-area: top;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom alignment */
    :where(menu.bottom) {
        position-area: bottom;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start alignment */
    :where(menu.start) {
        position-area: center start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End alignment */
    :where(menu.end) {
        position-area: center end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start alignment */
    :where(menu.top-start) {
        position-area: start span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Top end alignment */
    :where(menu.top-end) {
        position-area: start span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom start alignment */
    :where(menu.bottom-start) {
        position-area: end span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom end alignment */
    :where(menu.bottom-end) {
        position-area: end span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start top alignment */
    :where(menu.start-top) {
        position-area: span-end start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Start bottom alignment */
    :where(menu.start-bottom) {
        position-area: span-start start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }
    

    /* End top alignment */
    :where(menu.end-top) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }
    
    /* End bottom alignment */
    :where(menu.end-bottom) {
        position-area: span-start end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start corner alignment */
    :where(menu.top-start-corner, menu.start-top-corner) {
        position-area: start start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Top end corner alignment */
    :where(menu.top-end-corner, menu.end-top-corner) {
        position-area: start end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Bottom start corner alignment */
    :where(menu.bottom-start-corner, menu.start-bottom-corner) {
        position-area: end start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Bottom end corner alignment */
    :where(menu.bottom-end-corner, menu.end-bottom-corner) {
        position-area: end end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

    /* Touchscreen version */
    @media (pointer: coarse) {
        menu[popover] {
            position: fixed;
            position-area: none;
            top: auto;
            left: 1rem;
            bottom: 1rem;
            width: calc(100% - 2rem);
            margin: 0;

             /* Leading icons */
             & :where(li, a, button, label) [x-icon]:first-child:not(:only-child) {
                margin-inline-end: 0.8125rem
            }
        }
    }
}