.hdv2-tooltip {
    --hdv2-tooltip-bg: hsl(220 26% 14%);
    --hdv2-tooltip-fg: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hdv2-tooltip::after {
    content: attr(data-hdv2-tooltip);
    position: absolute;
    white-space: nowrap;
    background: var(--hdv2-tooltip-bg);
    color: var(--hdv2-tooltip-fg);
    border-radius: 0.4rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, visibility 0.14s ease;
    z-index: 30;
}

.hdv2-tooltip::before {
    content: '';
    position: absolute;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--hdv2-tooltip-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, visibility 0.14s ease;
    z-index: 29;
}

.hdv2-tooltip--top::after {
    left: 50%;
    bottom: calc(100% + 0.45rem);
    transform: translateX(-50%);
}

.hdv2-tooltip--top::before {
    left: 50%;
    bottom: calc(100% + 0.2rem);
    transform: translateX(-50%) rotate(45deg);
}

.hdv2-tooltip--bottom::after {
    left: 50%;
    top: calc(100% + 0.45rem);
    transform: translateX(-50%);
}

.hdv2-tooltip--bottom::before {
    left: 50%;
    top: calc(100% + 0.2rem);
    transform: translateX(-50%) rotate(45deg);
}

.hdv2-tooltip--left::after {
    right: calc(100% + 0.45rem);
    top: 50%;
    transform: translateY(-50%);
}

.hdv2-tooltip--left::before {
    right: calc(100% + 0.2rem);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.hdv2-tooltip--right::after {
    left: calc(100% + 0.45rem);
    top: 50%;
    transform: translateY(-50%);
}

.hdv2-tooltip--right::before {
    left: calc(100% + 0.2rem);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.hdv2-tooltip:hover::after,
.hdv2-tooltip:focus-visible::after,
.hdv2-tooltip:hover::before,
.hdv2-tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.hdv2-tooltip[aria-expanded="true"]::after,
.hdv2-tooltip[aria-expanded="true"]::before {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.hdv2-notifications-open .hdv2-tooltip::after,
body.hdv2-notifications-open .hdv2-tooltip::before,
body:has([data-hdv2-topbar-notifications-trigger][aria-expanded="true"]) .hdv2-tooltip::after,
body:has([data-hdv2-topbar-notifications-trigger][aria-expanded="true"]) .hdv2-tooltip::before,
body:has(.hdv2-cah-topbar__notifications-panel.is-open) .hdv2-tooltip::after,
body:has(.hdv2-cah-topbar__notifications-panel.is-open) .hdv2-tooltip::before {
    opacity: 0 !important;
    visibility: hidden !important;
}

.hdv2-cah-topbar .hdv2-tooltip::after,
.hdv2-cah-topbar .hdv2-tooltip::before {
    z-index: 60;
}