/**
 * tooltips.css
 *
 * Structured tooltips with a stable absolute-positioning baseline. Anchor
 * positioning can enhance this later without being required for correctness.
 */

:where([data-tooltip-host], .tooltip-host, :has(> :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip))) {
  position: relative;
}

:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip) {
  position: absolute;
  z-index: var(--tooltip-z-index, 1000);
  display: none;
  inline-size: max-content;
  max-inline-size: min(var(--tooltip-max-width, 32ch), 80vw);
  padding: var(--tooltip-padding, 0.5rem 0.7rem);
  border: var(--tooltip-border-width, 1px) solid var(--tooltip-border-color, var(--outline-overt, currentColor));
  border-radius: var(--tooltip-radius, var(--radius-sm, 0.25rem));
  background: var(--tooltip-background, var(--bedrock, #1f2937));
  color: var(--tooltip-color, var(--text-on-bedrock, Canvas));
  box-shadow: var(--tooltip-shadow, var(--shadow-sm, none));
  font-size: var(--tooltip-font-size, var(--font-size-sm, 0.875rem));
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-snug, 1.3);
  text-align: start;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
}

:where([data-tooltip-host], .tooltip-host, :has(> :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip))):is(:hover, :focus-visible, :focus-within)
  > :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip) {
  display: block;
  opacity: 1;
  visibility: visible;
  transition-delay: var(--tooltip-delay, 150ms), var(--tooltip-delay, 150ms), 0s;
}

:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is(:not([position], [data-position]), [position="top"], [data-position="top"], .tooltip-top) {
  inset-block-end: calc(100% + var(--tooltip-offset, 0.5rem));
  inset-inline-start: 50%;
  transform: translate(-50%, 0.25rem);
}

:where([data-tooltip-host], .tooltip-host, :has(> :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip))):is(:hover, :focus-visible, :focus-within)
  > :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is(:not([position], [data-position]), [position="top"], [data-position="top"], .tooltip-top) {
  transform: translate(-50%, 0);
}

:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is([position="bottom"], [data-position="bottom"], .tooltip-bottom) {
  inset-block-start: calc(100% + var(--tooltip-offset, 0.5rem));
  inset-inline-start: 50%;
  transform: translate(-50%, -0.25rem);
}

:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is([position="left"], [data-position="left"], .tooltip-left) {
  inset-block-start: 50%;
  inset-inline-end: calc(100% + var(--tooltip-offset, 0.5rem));
  transform: translate(0.25rem, -50%);
}

:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is([position="right"], [data-position="right"], .tooltip-right) {
  inset-block-start: 50%;
  inset-inline-start: calc(100% + var(--tooltip-offset, 0.5rem));
  transform: translate(-0.25rem, -50%);
}

@media (prefers-reduced-motion: reduce) {
  :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip) { transition: none; }
}