@use 'mixins' as ea;

// Guard against "sticky hover" on touch devices, which fire `mouseenter` on tap
// but never the matching `mouseleave`. The directive gates pointer listeners on
// `(hover: hover)`, but if a tooltip ever slips through keep it invisible on touch.
.ea-tooltip {
  z-index: var(--z-index-tooltip);
  // Viewport-relative, matching the coordinates the shared positioning helper
  // returns. Also keeps the box unambiguous once the bubble is promoted into
  // the top layer, where the containing block is the viewport either way.
  position: fixed;
  // A bubble clamped to the viewport has nowhere left to overflow to, so what
  // the cap cuts off scrolls inside it. Both axes: template content can hold
  // rows (avatars, icon rows) too unbreakable to wrap
  overflow: auto;
  // The consumer's `maxWidth` arrives as `--ea-tooltip-max-width` so the viewport
  // cap can win here instead of losing a specificity fight with an inline style.
  // The directive reads the margin token too, so keep it a px length
  max-width: min(
    var(--ea-tooltip-max-width, 100vw),
    calc(100vw - 2 * var(--ea-tooltip-viewport-margin, 8px))
  );
  // dvh, so retracting mobile browser chrome cannot leave the bubble taller than
  // what the user can actually see
  max-height: calc(100dvh - 2 * var(--ea-tooltip-viewport-margin, 8px));
  padding: var(--space-1-5) var(--space-2-5);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  // When a max-width switches the bubble to multi-line, break long unbreakable
  // strings (URLs, tokens) instead of letting them overflow the bubble.
  overflow-wrap: anywhere;
  border: var(--border-width-thin) solid var(--color-tooltip-border);
  border-radius: var(--radius-md);
  background-color: var(--color-tooltip-surface);
  color: var(--color-neutral-0);
  pointer-events: none;
  animation: ea-tooltip-fade-in var(--duration-fast) var(--ease-out);
  @include ea.elevated-surface-border;

  // An explicit `maxWidth` is a width to wrap at, not only a width to stop at
  &--wrapping {
    white-space: normal;
  }

  // A bubble the cap cut content off from is the one kind worth reaching with a
  // pointer, since it has a scrollbar; the rest stay click-through
  &--scrollable {
    pointer-events: auto;
  }

  @media (hover: none) {
    display: none;
  }

  // The bubble already declares its own padding, border, background and color,
  // so only the UA's popover geometry needs undoing once it is promoted.
  &[popover] {
    @include ea.top-layer-reset;
    // the reset clears the UA popover's overflow, which the clamp still needs
    overflow: auto;
  }
}

@keyframes ea-tooltip-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}