.lucent-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.lucent-tooltip-bubble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid color-mix(in oklab, var(--line) 72%, var(--brand) 28%);
  border-radius: 8px;
  background: color-mix(in oklab, var(--panel) 88%, #000 12%);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  z-index: 40;
  box-shadow: 0 8px 18px rgba(6, 12, 24, 0.24);
}

.lucent-tooltip-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-right: 1px solid color-mix(in oklab, var(--line) 72%, var(--brand) 28%);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 72%, var(--brand) 28%);
  background: color-mix(in oklab, var(--panel) 88%, #000 12%);
}

.lucent-tooltip-wrap.side-top .lucent-tooltip-bubble {
  bottom: calc(100% + 8px);
}

.lucent-tooltip-wrap.side-top .lucent-tooltip-bubble::after {
  bottom: -5px;
}

.lucent-tooltip-wrap.side-bottom .lucent-tooltip-bubble {
  top: calc(100% + 8px);
}

.lucent-tooltip-wrap.side-bottom .lucent-tooltip-bubble::after {
  top: -5px;
  transform: translateX(-50%) rotate(225deg);
}

.lucent-tooltip-wrap:hover .lucent-tooltip-bubble,
.lucent-tooltip-wrap:focus-within .lucent-tooltip-bubble {
  opacity: 1;
  visibility: visible;
}