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

.oo-tooltip {
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.oo-tooltip--text {
    background: hsla(0, 0%, 6%, 0.95);
    border-radius: var(--oo-radius-sm);
    color: #ffffff;
    font-size: var(--oo-font-size-md);
    max-width: 400px;
    opacity: 0;
    padding: 0.5em 1em;
    pointer-events: none;
    position: absolute;
    transition: all 0.18s ease-out 0.18s;
    width: max-content;
    z-index: 10;
}

.oo-tooltip:hover .oo-tooltip--text {
    opacity: 1;
}

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

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

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

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

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

.oo-tooltip[data-tooltip-position=left]:hover .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]:hover .oo-tooltip--text {
    transform: translate(10px, -50%);
}