/* ─── Component Styles ──────────────────────────── */

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

.tooltip .tooltiptext {
    position: absolute;
    top: -5px;
    left: 110%;
    z-index: 100;

    display: inline-block;
    visibility: hidden;
    opacity: 0;

    width: 120px;
    padding: 5px var(--spacing-border);
    border-radius: 6px;

    background-color: rgba(0, 0, 0, 0.78);

    color: #fff;
    font-size: 0.85rem;
    text-align: center;
}

/* Arrow pointing left toward the tooltip anchor */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;

    margin-top: -5px;
    border: 5px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.78);
}

/* ─── State & Modifier Classes ──────────────────── */

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}