/* Tooltip Atom */
.tooltip {
  position: absolute;
  z-index: 10000;
  padding: var(--space-1_5) var(--space-2_5);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-inverse);
  background-color: var(--color-neutral-800);
  border-radius: var(--border-radius-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-200) var(--easing-out);
  max-width: var(--space-62);
  box-shadow: var(--shadow-lg);
}

.tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
}

.tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}

.tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
}

.tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
}

/* Tooltip arrow */
.tooltip::before {
  content: '';
  position: absolute;
  border: var(--space-1) solid transparent;
}

.tooltip-top::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--color-neutral-800);
}

.tooltip-bottom::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--color-neutral-800);
}

.tooltip-left::before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--color-neutral-800);
}

.tooltip-right::before {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--color-neutral-800);
}

/* Show tooltip on hover (parent must have .tooltip-trigger class) */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus-visible .tooltip {
  opacity: 1;
}