/* Manifest Tooltips */

@layer base, components, utilities;



@layer utilities {

    /* Shared chrome — anchored x-tooltip popovers AND non-popover tooltips
       (e.g. the charts plugin's cursor-following tip) */
    :where(.tooltip) {
        width: fit-content;
        padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
        font-size: 0.875rem;
        color: var(--color-page, oklch(98.5% 0 0));
        background-color: var(--color-content-stark, oklch(43.9% 0 0));
        border: 0 none;
        border-radius: var(--radius, 0.5rem);
        box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));

        /* Leading icon */
        & [x-icon]:first-child {
            margin-inline-end: 0.25rem
        }

        /* Nested text elements */
        &>* {
            color: inherit
        }
    }

    /* Anchored popover positioning + open/close behavior */
    :where(.tooltip[popover]) {
        position: absolute;
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        position-area: bottom;
        inset: auto;
        display: block;
        max-width: 200px;
        margin: var(--spacing-popover-offset, 0.5rem) 0;
        animation: none;
        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        /* 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
        }

        &:hover {
            transition-delay: var(--tooltip-hover-delay, .5s)
        }
    }

}

/* Directional alignment lives in styles/snippets/manifest.alignment.css */
/* 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)
    }
}