.hint-overlay {
    --offset: 10px;

    width: 100%;
    height: 100%;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9999;

    position: fixed;

    .hint-container {
        position: fixed;
        opacity: 0;
        visibility: hidden;
        display: flex;
        will-change: transform;
        transform: translate3d(0, 0, 0);

        pointer-events: none;

        &.show {
            visibility: visible;
            opacity: 1;
        }

        &.pinned {
            pointer-events: none;

            .hint {
                pointer-events: auto;
            }
        }

        .hint {
            background-color: rgba(0, 0, 0, 0.9);
            color: var(--light);
            padding: 24px;
            border-radius: 10px;
            text-align: left;
            max-width: 520px;

            /* Default: above center */
            transform: translate(-50%, calc(-100% - var(--offset)));

            &::after {
                content: "";
                position: absolute;
                border-width: 10px;
                border-style: solid;
                /* Default: arrow at bottom center pointing down */
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
            }
        }

        /* Arrow left: popover shifted right, arrow at bottom-left */
        &.hint--arrow-left .hint {
            transform: translate(calc(-1rem - 10px), calc(-100% - var(--offset)));

            &::after {
                left: 1rem;
                transform: none;
            }
        }

        /* Arrow right: popover shifted left, arrow at bottom-right */
        &.hint--arrow-right .hint {
            transform: translate(calc(-100% + 1rem + 10px), calc(-100% - var(--offset)));

            &::after {
                left: auto;
                right: 1rem;
                transform: none;
            }
        }

        /* Below: popover below trigger, arrow on top pointing up */
        &.hint--below .hint {
            transform: translate(-50%, var(--offset));

            &::after {
                top: auto;
                bottom: 100%;
                border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
            }
        }

        /* Below + arrow left */
        &.hint--below.hint--arrow-left .hint {
            transform: translate(calc(-1rem - 10px), var(--offset));

            &::after {
                top: auto;
                bottom: 100%;
                left: 1rem;
                transform: none;
                border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
            }
        }

        /* Below + arrow right */
        &.hint--below.hint--arrow-right .hint {
            transform: translate(calc(-100% + 1rem + 10px), var(--offset));

            &::after {
                top: auto;
                bottom: 100%;
                left: auto;
                right: 1rem;
                transform: none;
                border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
            }
        }
    }
}

/* Hint icon underline variants — color the icon glyph + add underline */
.hint-icon--rest {
    color: var(--break) !important;
    border-bottom: 4px solid var(--break);
    padding-bottom: 4px;
}

.hint-icon--driving {
    color: var(--driving) !important;
    border-bottom: 4px solid var(--driving);
    padding-bottom: 4px;
}

.hint-icon--work {
    color: var(--work) !important;
    border-bottom: 4px solid var(--work);
    padding-bottom: 4px;
}

.hint-icon--available {
    color: var(--available) !important;
    border-bottom: 4px solid var(--available);
    padding-bottom: 4px;
}

.hint-icon--danger {
    color: var(--danger) !important;
}

/* Secondary text */
.hint-text-secondary {
    color: #999;
}

/* Badge styles */
.hint-badge {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 0.85em;
    display: inline-block;
}

.hint-badge--danger {
    border: 1px solid var(--danger);
}

/* Link style */
.hint-link {
    color: var(--primary);
    text-decoration: underline;
}

.hint-link:hover {
    color: var(--primary);
    opacity: 0.8;
}

.hint-file-link {
    color: var(--light);
    text-decoration: none;
}
.hint-file-link:hover {
    color: var(--light);
    text-decoration: underline;
}