/**
 * Tooltip Component - CSS
 * Source: src/components/Molecules/Tooltip/Tooltip.tsx (radix Content slots + variants)
 * Last synced: 2026-04-09 (ui-core v2.0.76)
 *
 * Parity notes: Molecule tooltip has no Arrow (unlike Atoms/Tooltip). Typography inside
 * React is only for string children; stories use <p> with global body16 + p { line-height: 1.5 }.
 */

@import url("../tokens.4b8ea74adec1.css");

.ui-tooltip-trigger { position: relative; display: inline-flex; }

.ui-tooltip {
    position: absolute;
    z-index: 50;
    box-sizing: border-box;
    display: inline-block;
    width: max-content;
    max-width: min(20rem, calc(100vw - 1.5rem));
    padding: 6px 12px; /* py-1.5 px-3 (tailwind-merge wins over px-4 py-2 in source tv()) */
    font-family: var(--font-spline, "Spline Sans", sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5; /* index.css p, li, … */
    text-wrap: balance;
    color: #fff;
    background-color: var(--uicore-primary);
    border: none;
    border-radius: var(--uicore-radius);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ui-tooltip p {
    margin: 0;
}

.ui-tooltip.visible {
    opacity: 1;
}

/* Primary (default): text-white bg-primary */

.ui-tooltip--outlined {
    color: var(--color-gray-900);
    background-color: #fff;
    border: 1px solid var(--uicore-primary);
}

/* Positions — side offset matches TooltipContent sideOffset={10} */
.ui-tooltip.top {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
}
.ui-tooltip.top.visible { transform: translateX(-50%) scale(1); }

.ui-tooltip.bottom {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
}
.ui-tooltip.bottom.visible { transform: translateX(-50%) scale(1); }

.ui-tooltip.left {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) scale(0.95);
}
.ui-tooltip.left.visible { transform: translateY(-50%) scale(1); }

.ui-tooltip.right {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) scale(0.95);
}
.ui-tooltip.right.visible { transform: translateY(-50%) scale(1); }