/* ============================================================
   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. */
.oo-tooltip {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Der Text ist ein Popover (popover="manual"), das tooltip.js beim Hover und Fokus im Top Layer öffnet und mit
   position: fixed an die Hülle setzt (left/top, data-tooltip-lage, --oo-tooltip-max-width). Im Top Layer schneidet ihn
   kein Vorfahre mit overflow ab. Die Regeln überschreiben die Vorgaben des Browsers für [popover] (inset, margin,
   border, overflow, Farben). Geschlossen ist er display: none und nimmt keinen Platz ein; allow-discrete,
   overlay 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: 0;
    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);
    inset: auto;
    line-height: 1.4;
    margin: 0;
    max-width: var(--oo-tooltip-max-width, min(400px, calc(100vw - 2 * var(--oo-space-2))));
    opacity: 0;
    overflow: visible;
    overflow-wrap: break-word;
    padding: var(--oo-space-2) var(--oo-space-4);
    pointer-events: none;
    position: fixed;
    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 allow-discrete, overlay 0.18s ease-out 0.18s allow-discrete;
    white-space: normal;
    width: max-content;
}

.oo-tooltip--text:popover-open {
    display: block;
    opacity: 1;
    transform: none;
}

/* Ausgangszustand beim Einblenden: ein Stück näher an der Hülle, von der aus der Tooltip in seine Lage gleitet. */
@starting-style {
    .oo-tooltip--text:popover-open {
        opacity: 0;
    }

    .oo-tooltip--text[data-tooltip-lage=top]:popover-open {
        transform: translateY(10px);
    }

    .oo-tooltip--text[data-tooltip-lage=bottom]:popover-open {
        transform: translateY(-10px);
    }

    .oo-tooltip--text[data-tooltip-lage=left]:popover-open {
        transform: translateX(10px);
    }

    .oo-tooltip--text[data-tooltip-lage=right]:popover-open {
        transform: translateX(-10px);
    }
}

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