/*
 * <x-rich-tooltip>: an M3 rich tooltip, a few lines of context for a control, with an optional
 * subhead and actions.
 *
 * RichTooltipTokens (androidx Compose Material 3, Apache-2.0): surface-container, the medium
 * corner, elevation 2, 312px wide at most, 16px either side, 12px above the subhead (or the text
 * when there is none) and 8px below it. Title-small subhead and body-medium text in
 * on-surface-variant, label-large actions in primary — the actions row pulls itself back 12px to
 * the text's edge, as the alert's actions row does (alert.css).
 *
 * Placed by CSS anchor positioning on `data-md-side`, corner-to-corner so the 312px bubble has
 * room to spread past a narrow trigger; `position-try-fallbacks` flips it when the window has no
 * room, same shape as tooltip.css's plain tooltip. It fades in and out on the fast effects spring:
 * `@starting-style` gives the fade in a start, and the fade out is its exit copy's
 * (`data-md-popover-exit`, resources/js/popover-exit.js), which `data-md-popover-closing` turns
 * back to the closed opacity.
 *
 * resources/js/rich-tooltip.js shows and hides the bubble and keeps the trigger described with
 * `aria-describedby` — and, while `persistent`, `aria-haspopup`/`aria-expanded` (ACT-22) — none of
 * which this stylesheet draws.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@layer material.components {
    [data-md-rich-tooltip] {
        display: inline-flex;
    }

    [data-md-rich-tooltip-bubble] {
        inset: auto;
        margin: 0;
        overflow: visible;
        width: max-content;
        max-width: 312px;
        border-width: 0;
        border-radius: var(--md-sys-shape-corner-md);
        padding-inline: var(--md-sys-measurement-space200);
        padding-block: 12px var(--md-sys-measurement-space100);
        background-color: var(--md-sys-color-surface-container);
        box-shadow: var(--md-sys-elevation-2);
        text-align: start;
        white-space: normal;
        opacity: 0;
        transition-property: opacity;
        transition-duration: var(--md-sys-motion-effects-fast-duration);
        transition-timing-function: var(--md-sys-motion-effects-fast);

        &:popover-open:not([data-md-popover-closing]) {
            opacity: 1;

            @starting-style {
                opacity: 0;
            }
        }
    }

    [data-md-rich-tooltip-bubble]:is([data-md-side='top'], [data-md-side='bottom']) {
        margin-block: var(--md-sys-measurement-space50);
        position-try-fallbacks: flip-block, flip-inline;
    }

    [data-md-rich-tooltip-bubble]:is([data-md-side='left'], [data-md-side='right']) {
        margin-inline: var(--md-sys-measurement-space50);
        position-try-fallbacks: flip-inline, flip-block;
    }

    [data-md-rich-tooltip-bubble][data-md-side='top'] {
        position-area: top span-right;
    }

    [data-md-rich-tooltip-bubble][data-md-side='bottom'] {
        position-area: bottom span-right;
    }

    [data-md-rich-tooltip-bubble][data-md-side='left'] {
        position-area: left span-bottom;
    }

    [data-md-rich-tooltip-bubble][data-md-side='right'] {
        position-area: right span-bottom;
    }

    [data-md-rich-tooltip-title] {
        display: block;
        margin-block-end: var(--md-sys-measurement-space50);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-title-sm);
        letter-spacing: var(--md-sys-typescale-title-sm-tracking);
        font-variation-settings: normal;
    }

    [data-md-rich-tooltip-text] {
        display: block;
        padding-block-end: var(--md-sys-measurement-space100);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-md);
        letter-spacing: var(--md-sys-typescale-body-md-tracking);
        font-variation-settings: normal;
    }

    [data-md-rich-tooltip-actions] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--md-sys-measurement-space100);
        margin-inline-start: -12px;
    }
}