// Tooltip primitive — see Tooltip.tsx. Shown via :hover/:focus-within on
// the wrapper, no JS positioning: a small bubble centered above the
// trigger, with a matching arrow. Colocated here rather than in
// global.scss, same convention as dialog.scss.

.tooltip {
  position: relative;
  display: inline;
}

.tooltip__bubble {
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  left: 50%;
  z-index: 10;
  width: max-content;
  max-width: 16rem;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-background);
  background: var(--color-text);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0.12s;
  pointer-events: none;

  // Small arrow pointing down at the trigger.
  &::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    background: var(--color-text);
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

.tooltip:hover .tooltip__bubble,
.tooltip:focus-within .tooltip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
