.ue-hint-icon {
    position: relative;
    cursor: pointer;
    color: var(--ue-primary);
}

.ue-hint-icon .ue-hint-text {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ue-gray-300);
    color: var(--ue-text);
    padding: var(--ue-space-8) var(--ue-space-12);
    border-radius: var(--ue-radius-6);
    white-space: normal;
    width: max-content;
    max-width: 400px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: var(--ue-z-tooltip);
    box-shadow: var(--ue-shadow-hint);
}

.ue-hint-icon .ue-hint-text::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    border-width: 6px;
    border-style: solid;
    border-color: var(--ue-gray-300) transparent transparent transparent;
}

.ue-hint-icon:hover .ue-hint-text {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.ue-hint-text h4 {
    font-size: var(--ue-font-size-18);
}

.ue-hint-text p {
    font-size: var(--ue-font-size-14);
}