/*
    Travayoo tooltip component
    --------------------------
    Use on any element:
        <button data-trv-tooltip="Tooltip text">...</button>

    Optional settings:
        data-trv-tooltip-position="top|bottom|left|right"   Default: top
        data-trv-tooltip-width="220"                       Max width in px

    Do not use the browser title attribute for modern screens. Keep tooltip text
    in data-trv-tooltip so the same component works for table cells, icons,
    buttons and compact mobile UI.
*/
.trv-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: min(260px, calc(100vw - 24px));
    padding: 6px 8px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--secondary, #172236) 92%, #000);
    color: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .22);
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.25;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px) scale(.98);
    transition: opacity .12s ease, transform .12s ease;
    white-space: normal;
}

.trv-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.trv-tooltip::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
}

.trv-tooltip[data-placement="top"]::after {
    left: calc(50% - 4px);
    bottom: -4px;
}

.trv-tooltip[data-placement="bottom"]::after {
    left: calc(50% - 4px);
    top: -4px;
}

.trv-tooltip[data-placement="left"]::after {
    right: -4px;
    top: calc(50% - 4px);
}

.trv-tooltip[data-placement="right"]::after {
    left: -4px;
    top: calc(50% - 4px);
}

@media (hover: none), (pointer: coarse) {
    .trv-tooltip {
        font-size: 11px;
        padding: 7px 9px;
    }
}