[data-fui-comp="ui-tooltip"] {
  position: relative;
  display: inline-block;
  /* Allow keyboard focus on the wrapper for :focus-within to reveal
     the pop without requiring focus on a particular descendant
     element. */
}
[data-fui-comp="ui-tooltip"] .ui-tooltip__pop {
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-text, #18181B);
  color: var(--color-surface, #FFFFFF);
  padding: var(--spacing-xs, 2px) var(--spacing-sm, 4px);
  font-size: 0.8rem;
  line-height: 1.2;
  border-radius: var(--radii-sm, 4px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  max-inline-size: 240px;
  z-index: var(--zindex-popover, 400);
  transition: opacity var(--duration-fast, 150ms) ease,
              transform var(--duration-fast, 150ms) ease,
              visibility 0s var(--duration-fast, 150ms);
}
[data-fui-comp="ui-tooltip"]:hover .ui-tooltip__pop,
[data-fui-comp="ui-tooltip"]:focus-within .ui-tooltip__pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

[data-fui-comp="ui-tooltip"].ui-tooltip--bottom .ui-tooltip__pop {
  inset-block-end: auto;
  inset-block-start: calc(100% + 6px);
  transform: translateX(-50%) translateY(-4px);
}
[data-fui-comp="ui-tooltip"].ui-tooltip--bottom:hover .ui-tooltip__pop,
[data-fui-comp="ui-tooltip"].ui-tooltip--bottom:focus-within .ui-tooltip__pop {
  transform: translateX(-50%) translateY(0);
}
[data-fui-comp="ui-tooltip"].ui-tooltip--left .ui-tooltip__pop {
  inset-block-end: 50%;
  inset-inline-start: auto;
  inset-inline-end: calc(100% + 6px);
  transform: translateY(50%) translateX(4px);
}
[data-fui-comp="ui-tooltip"].ui-tooltip--left:hover .ui-tooltip__pop,
[data-fui-comp="ui-tooltip"].ui-tooltip--left:focus-within .ui-tooltip__pop {
  transform: translateY(50%) translateX(0);
}
[data-fui-comp="ui-tooltip"].ui-tooltip--right .ui-tooltip__pop {
  inset-block-end: 50%;
  inset-inline-start: calc(100% + 6px);
  transform: translateY(50%) translateX(-4px);
}
[data-fui-comp="ui-tooltip"].ui-tooltip--right:hover .ui-tooltip__pop,
[data-fui-comp="ui-tooltip"].ui-tooltip--right:focus-within .ui-tooltip__pop {
  transform: translateY(50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-fui-comp="ui-tooltip"] .ui-tooltip__pop { transition: none; transform: translateX(-50%) translateY(0); }
}