/*
 * <x-tooltip>: M3's plain tooltip, a short label for a control in the inverse surface.
 *
 * The bubble is a `popover="manual"` in the top layer, so no `overflow: hidden` parent clips it,
 * placed by CSS anchor positioning on its `data-md-side` and flipping to the other side where the
 * window has no room. PlainTooltipTokens and TooltipDefaults (androidx Compose Material 3,
 * Apache-2.0): `inverse-surface` container with the extra-small corner, `body-small` supporting
 * text in `inverse-on-surface`, 8px either side and 4px above and below, 200px wide at most, 4px
 * from its anchor. It never takes the pointer, so it can stand over the control it names.
 *
 * 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/tooltip.js shows and
 * hides it.
 */

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

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

    [data-md-tooltip] {
        inset: auto;
        margin: 0;
        max-inline-size: 200px;
        overflow: visible;
        border-width: 0;
        border-radius: var(--md-sys-shape-corner-xs);
        padding-block: var(--md-sys-measurement-space50);
        padding-inline: var(--md-sys-measurement-space100);
        background-color: var(--md-sys-color-inverse-surface);
        color: var(--md-sys-color-inverse-on-surface);
        font: var(--md-sys-typescale-body-sm);
        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
        font-variation-settings: normal;
        text-align: center;
        white-space: normal;
        pointer-events: none;
        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-tooltip]:is([data-md-side='top'], [data-md-side='bottom']) {
        margin-block: var(--md-sys-measurement-space50);
        position-try-fallbacks: flip-block;
    }

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

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

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

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

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