.root {
  position: relative;
  display: inline-flex;
}
.tooltip {
  position: absolute;
  z-index: var(--layer-overlay);
  inset-block-end: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  inline-size: max-content;
  max-inline-size: 16rem;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--text-primary);
  font-size: var(--type-caption-size);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(var(--space-1));
  transition:
    opacity var(--duration-fast) var(--easing-productive),
    transform var(--duration-fast) var(--easing-productive);
}
.root:hover .tooltip,
.root:focus-within .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
html[dir='rtl'] .tooltip {
  transform: translateX(50%) translateY(var(--space-1));
}
html[dir='rtl'] .root:hover .tooltip,
html[dir='rtl'] .root:focus-within .tooltip {
  transform: translateX(50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .tooltip {
    transition: none;
  }
}
