/* ============================================================
   Onesown Blazor Components – Tooltip
   Abhängigkeit: theme1.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. Oben und unten hält tooltip.js den Tooltip im Fenster (--oo-tooltip-dx). */
.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. */
.oo-tooltip--text {
    background: hsla(0, 0%, 6%, 0.95);
    border-radius: var(--oo-radius-sm);
    color: #ffffff;
    display: none;
    font-size: var(--oo-font-size-md);
    max-width: min(400px, calc(100vw - 16px));
    opacity: 0;
    padding: 0.5em 1em;
    pointer-events: none;
    position: absolute;
    transition: all 0.18s ease-out 0.18s;
    transition-behavior: allow-discrete;
    width: max-content;
    z-index: 10;
}

.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%);
}

/* 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]):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]):is(:hover, :focus-within) .oo-tooltip--text {
        transform: translateY(-50%);
    }
}