@use '~flux/components/css/mixin';

.tooltipHost {
    position: fixed;
    inset: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    overflow: visible;
    pointer-events: none;
}

.tooltip {
    --foreground: var(--gray-200);
    --foreground-prominent: var(--gray-50);
    --foreground-secondary: var(--gray-400);

    @include mixin.text(small);

    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    max-width: 360px;
    padding: 9px 15px;
    flex-flow: column;
    background: var(--overlay-strong);
    backdrop-filter: blur(3px) saturate(180%);
    border-radius: var(--radius);
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    translate: calc(var(--x) * 1px) calc(var(--y) * 1px);
    isolation: isolate;
    z-index: 100000;

    &::after {
        position: absolute;
        display: block;
        top: var(--arrowY);
        left: var(--arrowX);
        height: 9px;
        width: 9px;
        content: '';
        background: inherit;
        border-radius: 0 0 3px 0;
        clip-path: polygon(100% 100%, 99% 0%, 0% 99%);
        rotate: var(--arrowAngle);
        transform-origin: center;
        translate: -50% -50%;
    }
}

[dark] .tooltip {
    --foreground: var(--gray-700);
    --foreground-prominent: var(--gray-900);
    --foreground-secondary: var(--gray-500);
}

.tooltipAbove {
    composes: tooltip;

    transform-origin: bottom center;
}

.tooltipBelow {
    composes: tooltip;

    transform-origin: top center;
}

.tooltipEnd {
    composes: tooltip;

    transform-origin: center left;
}

.tooltipStart {
    composes: tooltip;

    transform-origin: center right;
}