/* Manifest Dropdowns */

@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(menu[popover], .dropdown-menu):where(:not(.unstyle)) {
        position-try-fallbacks: flip-inline, flip-block;
        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(98.5% 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 (labels only when flat items — field wrappers keep form layout) */
        & :where(li, a, button, [role=button], label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):not(.unstyle) {
            display: inline-flex;
            justify-content: start;
            align-items: center;
            width: 100%;
            max-width: 100%;
            min-height: var(--spacing-field-height, 2.25rem);
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            font-weight: normal;
            color: var(--color-content-stark, oklch(43.9% 0 0));
            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;
            transition: none;

            &:hover {
                color: var(--color-field-inverse, oklch(43.9% 0 0));
                text-decoration: inherit;
                background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
            }

            &:active {
                color: var(--color-field-inverse, oklch(43.9% 0 0));
                background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
            }

            & 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(43.9% 0 0))
        }

        /* 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, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

        /* Labels (not inner field-surface wrappers) */
        & label:not(.unstyle):not(:has(> input[type=search], > input[type=file], > button[command="--copy"])) {
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            cursor: default;

            &:hover,
            &:active {
                background-color: transparent
            }

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

        /* Inputs and textareas placed as direct items */
        &>:where(input, textarea),
        & :where(li)>:where(input, textarea) {
            flex-shrink: 0;

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

        /* Groups and tablists */
        & :where([role=group], [role=tablist]) {
            min-width: calc(100% - var(--spacing-field-padding));
            margin-left: auto;
            margin-right: auto;

            & :where(a, button, [role=button]) {
                justify-content: center
            }
        }

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

    /* Dark theme */
    :where(.dark menu[popover]) :where(li, a, button, label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):hover {
        background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
    }

    /* Nested menu alignment (not combobox listboxes, which anchor to their field) */
    :where(menu menu:not([role=listbox])):where(:not(.unstyle)) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Center alignment (dropdown-only; tooltips have no .center) */
    :where(menu.center) {
        position-area: center
    }
}

/* Directional alignment lives in styles/snippets/manifest.alignment.css */

@layer utilities {

    /* Touchscreen version — outranks the shared alignment table on specificity */
    @media (pointer: coarse) {
        menu[popover]:not(.unstyle) {
            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
            }
        }
    }
}
/* Anchored popover alignment — single source shared by dropdowns and tooltips.
   The build appends this to standalone copies and adds it once to the bundle.
   Zero specificity throughout, so the coarse-pointer sheet and author rules
   still win. Dropdown-only variants (.center) stay in manifest.dropdown.css. */

@layer base, components, utilities;

@layer utilities {

    /* Top alignment */
    :where(:is(menu[popover], .dropdown-menu, .tooltip).top) {
        position-area: top;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

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

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

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

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

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

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

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

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

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

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

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

    /* Top start corner alignment */
    :where(:is(menu[popover], .dropdown-menu, .tooltip):is(.top-start-corner, .start-top-corner)) {
        position-area: start start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

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

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

    /* Bottom end corner alignment */
    :where(:is(menu[popover], .dropdown-menu, .tooltip):is(.bottom-end-corner, .end-bottom-corner)) {
        position-area: end end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
}