/* ============================================================
   Onesown Blazor Components – Tooltip
   Abhängigkeit: theme.css
   ============================================================ */

/* inline-flex statt inline-block: Als Block hätte die Hülle die Zeilenhöhe ihrer eigenen Schrift, und kleinerer Inhalt
   (etwa ein <small>) säße auf deren Grundlinie tiefer als sein Nachbar in derselben Zeile. So ist sie genau so hoch
   wie ihr Inhalt. Am Fensterrand hält tooltip.js den Tooltip im Fenster (--oo-tooltip-dx, --oo-tooltip-max-width,
   data-tooltip-ausweich). */
.oo-tooltip {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Ohne Hover ganz ausgeblendet (display: none), nicht nur durchsichtig: Ein durchsichtiger Tooltip nimmt weiter Platz
   ein und vergrößert am Rand eines scrollenden Bereichs dessen Breite, am Handy lässt sich die Seite dann seitlich
   verschieben. allow-discrete und @starting-style erhalten das Ein- und Ausblenden.
   Farben aus der Graupalette: im hellen Theme dunkler Tooltip mit heller Schrift, im dunklen Theme (umgedrehte
   Palette) heller Tooltip mit dunkler Schrift – in beiden Fällen deutlich vom Seitenhintergrund abgesetzt. */
.oo-tooltip--text {
    background: color-mix(in srgb, var(--oo-gray-950) 95%, transparent);
    border-radius: var(--oo-radius-sm);
    box-shadow: var(--oo-shadow-sm);
    color: var(--oo-gray-50);
    cursor: default;
    display: none;
    font-size: var(--oo-font-size-md);
    line-height: 1.4;
    max-width: var(--oo-tooltip-max-width, min(400px, calc(100vw - 2 * var(--oo-space-2))));
    opacity: 0;
    overflow-wrap: break-word;
    padding: var(--oo-space-2) var(--oo-space-4);
    pointer-events: none;
    position: absolute;
    text-align: left;
    transition: opacity 0.18s ease-out 0.18s, transform 0.18s ease-out 0.18s, display 0.18s ease-out 0.18s;
    transition-behavior: allow-discrete;
    white-space: normal;
    width: max-content;
    z-index: var(--oo-z-dropdown);
}

.oo-tooltip:is(:hover, :focus-within) .oo-tooltip--text {
    display: block;
    opacity: 1;
}

.oo-tooltip[data-tooltip-position=top] .oo-tooltip--text {
    bottom: 100%;
    left: 50%;
    transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)));
}

.oo-tooltip[data-tooltip-position=top]:is(:hover, :focus-within) .oo-tooltip--text {
    transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)), -10px);
}

.oo-tooltip[data-tooltip-position=bottom] .oo-tooltip--text {
    left: 50%;
    top: 100%;
    transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)));
}

.oo-tooltip[data-tooltip-position=bottom]:is(:hover, :focus-within) .oo-tooltip--text {
    transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)), 10px);
}

.oo-tooltip[data-tooltip-position=left] .oo-tooltip--text {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.oo-tooltip[data-tooltip-position=left]:is(:hover, :focus-within) .oo-tooltip--text {
    transform: translate(-10px, -50%);
}

.oo-tooltip[data-tooltip-position=right] .oo-tooltip--text {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.oo-tooltip[data-tooltip-position=right]:is(:hover, :focus-within) .oo-tooltip--text {
    transform: translate(10px, -50%);
}

/* Ausweichlage: Reicht der Platz in der gewünschten Richtung nicht, setzt tooltip.js data-tooltip-ausweich auf die
   Gegenrichtung bzw. (bei links/rechts am schmalen Bildschirm) auf oben/unten. Steht nach den Positionsregeln und ist
   gleich spezifisch, gewinnt also. */
.oo-tooltip[data-tooltip-ausweich=top] .oo-tooltip--text {
    bottom: 100%;
    left: 50%;
    right: auto;
    top: auto;
    transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)));
}

.oo-tooltip[data-tooltip-ausweich=top]:is(:hover, :focus-within) .oo-tooltip--text {
    transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)), -10px);
}

.oo-tooltip[data-tooltip-ausweich=bottom] .oo-tooltip--text {
    bottom: auto;
    left: 50%;
    right: auto;
    top: 100%;
    transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)));
}

.oo-tooltip[data-tooltip-ausweich=bottom]:is(:hover, :focus-within) .oo-tooltip--text {
    transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)), 10px);
}

/* Mit Escape ausgeblendet (tooltip.js), bis Maus bzw. Fokus die Hülle verlassen. */
.oo-tooltip[data-tooltip-verborgen]:is(:hover, :focus-within) .oo-tooltip--text {
    display: none;
}

/* Ausgangszustand beim Einblenden aus display: none; nach den Positionsregeln, die sonst gleichrangig gewinnen. */
@starting-style {
    .oo-tooltip:is(:hover, :focus-within) .oo-tooltip--text {
        opacity: 0;
    }

    .oo-tooltip:is([data-tooltip-position=top], [data-tooltip-position=bottom], [data-tooltip-ausweich]):is(:hover, :focus-within) .oo-tooltip--text {
        transform: translate(calc(-50% + var(--oo-tooltip-dx, 0px)));
    }

    .oo-tooltip:is([data-tooltip-position=left], [data-tooltip-position=right]):not([data-tooltip-ausweich]):is(:hover, :focus-within) .oo-tooltip--text {
        transform: translateY(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oo-tooltip--text {
        transition: none;
    }
}