/**
 * tooltip.css: Tooltip (ui-tooltip | .ui-tooltip, [data-slot~="tooltip-content"])
 *
 * @layer      variables, reset, components
 * @requires   layers.css, _variables.css, popover.css, kbd.css (--ui-kbd-*)
 * @uses       interestfor: Interest Invokers API (Chromium 142+; polyfill via invokers)
 * @uses       [data-slot~="tooltip-content"]: hint popover (light dismiss, auto-hides sibling hints)
 * @uses       anchor-name, position-anchor, position-area, position-try-fallbacks:
 *             explicit anchors for polyfill; data-side maps to --ui-popover-position-*
 * @tokens     --ui-tooltip-* (@layer variables)
 */

@layer variables {
  :root {
    --ui-tooltip-background: var(--foreground);
    --ui-tooltip-foreground: var(--background);
    --ui-tooltip-border-color: transparent;
    --ui-tooltip-radius: var(--radius-sm);
    --ui-tooltip-shadow: var(--shadow-sm);
    --ui-tooltip-padding-inline: var(--gap-xs);
    --ui-tooltip-padding-block: var(--step-1);
    --ui-tooltip-gap: var(--step-1);
    --ui-tooltip-font-family: var(--font-family-mono);
    --ui-tooltip-font-size: var(--font-size-xs);
    --ui-tooltip-line-height: var(--leading-xs);
    --ui-tooltip-font-weight: var(--font-weight-body);
    --ui-tooltip-max-inline-size: 16ch;

    /* Arrow */
    --ui-tooltip-arrow-size: var(--step-2);
    --ui-tooltip-arrow-color: var(--ui-tooltip-background);
    --ui-tooltip-arrow-radius: var(--step-0_5);

    /* Reveal transitions: lighter than popover */
    --ui-tooltip-transition-duration: calc(var(--default-transition-duration) / 2);
    --ui-tooltip-transition-timing-function: var(--default-transition-timing-function);
    --ui-tooltip-transition-delay: 0ms;
    --ui-tooltip-transition:
      opacity var(--ui-tooltip-transition-duration) var(--ui-tooltip-transition-timing-function)
        var(--ui-tooltip-transition-delay),
      transform var(--ui-tooltip-transition-duration) var(--ui-tooltip-transition-timing-function)
        var(--ui-tooltip-transition-delay),
      overlay var(--ui-tooltip-transition-duration) var(--ui-tooltip-transition-timing-function)
        var(--ui-tooltip-transition-delay) allow-discrete,
      display var(--ui-tooltip-transition-duration) var(--ui-tooltip-transition-timing-function)
        var(--ui-tooltip-transition-delay) allow-discrete;
    --ui-tooltip-scale--start: 0.94;
    --ui-tooltip-translate--start: 0, 0.25em, 0;
    --ui-tooltip-opacity--start: 0;
    --ui-tooltip-scale--end: 1;
    --ui-tooltip-translate--end: 0, 0, 0;
    --ui-tooltip-opacity--end: 1;

    /* Positioning: smaller offset than popover menus */
    --ui-tooltip-margin-block: var(--step-1);
    --ui-tooltip-margin-inline: 0;

    /* Popover overrides */
    --ui-popover-shadow: var(--shadow-xs);
    --ui-popover-min-inline-size: fit-content;
    --ui-popover-position-area: block-start span-all;
    --ui-popover-origin: bottom center;
  }
}

@layer reset {
  /* ===========================================================================
  HINT POPOVER OVERRIDES
  - [popover] defaults in popover.css target menus; hint tooltips need a compact
    surface and must not inherit min-inline-size or backdrop blur.
  =========================================================================== */

  :where([data-slot~="tooltip-content"]) {
    color: var(--ui-tooltip-foreground);
    background-color: var(--ui-tooltip-background);
    min-inline-size: unset;
    max-inline-size: var(--ui-tooltip-max-inline-size);
    backdrop-filter: none;

    transform-origin: var(--ui-popover-origin);
    opacity: var(--ui-tooltip-opacity--start);
    transform: scale(var(--ui-tooltip-scale--start)) translate3d(var(--ui-tooltip-translate--start));
    transition: var(--ui-tooltip-transition);
  }

  @supports (anchor-name: --zazz) {
    :where([data-slot~="tooltip-content"]) {
      margin-block: var(--ui-tooltip-margin-block);
      margin-inline: var(--ui-tooltip-margin-inline);
    }
  }

  [data-slot~="tooltip-content"]:popover-open {
    display: flex;
    opacity: var(--ui-tooltip-opacity--end);
    transform: scale(var(--ui-tooltip-scale--end)) translate3d(var(--ui-tooltip-translate--end));

    @starting-style {
      opacity: var(--ui-tooltip-opacity--start);
      transform: scale(var(--ui-tooltip-scale--start))
        translate3d(var(--ui-tooltip-translate--start));
    }
  }
}

@layer zazz.components {
  /* ===========================================================================
  TOOLTIP: interestfor trigger + anchored hint popover
  - interestfor wires hover/focus/long-press to the hint popover and sets ARIA
    (aria-describedby / aria-details). Do not add role="tooltip" or manual ARIA.
  - Explicit anchor-name supports the invokers/anchor polyfills (implicit anchors
    from interestfor are not polyfilled).
  =========================================================================== */

  :where(ui-tooltip, .ui-tooltip) {
    anchor-scope: --ui-tooltip-trigger;
    display: inline-block;
  }

  :where(ui-tooltip, .ui-tooltip) > :where([interestfor], [data-slot~="tooltip-trigger"]) {
    anchor-name: --ui-tooltip-trigger;
  }

  [data-slot~="tooltip-trigger"] {
    display: inline-flex;
  }

  [data-slot~="tooltip-content"] {
    position-anchor: --ui-tooltip-trigger;

    display: flex;
    align-items: center;
    gap: var(--ui-tooltip-gap);
    inline-size: max-content;

    padding-inline: var(--ui-tooltip-padding-inline);
    padding-block: var(--ui-tooltip-padding-block);

    border: 1px solid var(--ui-tooltip-border-color);
    border-radius: var(--ui-tooltip-radius);
    box-shadow: var(--ui-tooltip-shadow);

    font-family: var(--ui-tooltip-font-family);
    font-size: var(--ui-tooltip-font-size);
    line-height: var(--ui-tooltip-line-height);
    font-weight: var(--ui-tooltip-font-weight);
    text-wrap: balance;
  }

  /* Descendant (not child) so keys wrapped in a ui-kbd-group still retint */
  [data-slot~="tooltip-content"] :where(kbd) {
    --ui-kbd-background: color-mix(in oklch, var(--ui-tooltip-foreground) 15%, transparent);
    --ui-kbd-foreground: var(--ui-tooltip-foreground);
    --ui-kbd-min-inline-size: var(--step-4);
    --ui-kbd-min-block-size: var(--step-4);
    --ui-kbd-font-size: var(--font-size-xs);
  }

  [data-slot~="tooltip-content"]:has([data-slot~="tooltip-arrow"]) {
    overflow: visible;
  }

  /* Positioning: reuse --ui-popover-position-* hooks from popover.css via data-side */

  [data-slot~="tooltip-content"][data-side="top"]:not([data-align]),
  [data-slot~="tooltip-content"][data-side="top"][data-align="center"] {
    --ui-tooltip-translate--start: 0, 0.25em, 0;
    --ui-popover-position-area: block-start span-all;
    --ui-popover-origin: bottom center;
    --ui-tooltip-margin-block: var(--step-1);
  }

  [data-slot~="tooltip-content"][data-side="bottom"]:not([data-align]),
  [data-slot~="tooltip-content"][data-side="bottom"][data-align="center"] {
    --ui-tooltip-translate--start: 0, 0.25em, 0;
    --ui-popover-position-area: block-end span-all;
    --ui-popover-origin: top center;
    --ui-tooltip-margin-block: var(--step-1);
  }

  [data-slot~="tooltip-content"][data-side="left"]:not([data-align]),
  [data-slot~="tooltip-content"][data-side="left"][data-align="center"] {
    --ui-tooltip-translate--start: 0.25em, 0, 0;
    --ui-popover-position-area: inline-start span-all;
    --ui-popover-origin: center right;
    --ui-tooltip-margin-inline: var(--step-1);
    --ui-tooltip-margin-block: 0;
  }

  [data-slot~="tooltip-content"][data-side="right"]:not([data-align]),
  [data-slot~="tooltip-content"][data-side="right"][data-align="center"] {
    --ui-tooltip-translate--start: 0.25em, 0, 0;
    --ui-popover-position-area: inline-end span-all;
    --ui-popover-origin: center left;
    --ui-tooltip-margin-inline: var(--step-1);
    --ui-tooltip-margin-block: 0;
  }

  /* Tooltip arrow */
  [data-slot~="tooltip-arrow"] {
    position: absolute;
    /* physical top/left/right/bottom throughout the arrow rules: they pair with
       the physical [data-side] placement semantics from anchor positioning */
    top: calc(100% - var(--ui-tooltip-arrow-size) / 2);
    left: 50%;
    transform: translate(-50%, 0%) rotate(45deg);
    inline-size: var(--ui-tooltip-arrow-size);
    block-size: var(--ui-tooltip-arrow-size);
    background-color: var(--ui-tooltip-arrow-color);
    border-radius: var(--ui-tooltip-arrow-radius);
    pointer-events: none;
  }

  /* Tooltip arrow position */
  [data-slot~="tooltip-content"][data-side="top"] [data-slot~="tooltip-arrow"] {
    bottom: calc((var(--ui-tooltip-arrow-size) / 2) * -1);
    left: 50%;
  }

  [data-slot~="tooltip-content"][data-side="bottom"] [data-slot~="tooltip-arrow"] {
    top: calc((var(--ui-tooltip-arrow-size) / 2) * -1);
    left: 50%;
  }

  [data-slot~="tooltip-content"][data-side="left"] [data-slot~="tooltip-arrow"] {
    left: calc(100% - var(--ui-tooltip-arrow-size) / 2);
    top: 50%;
    transform: translate(0%, -50%) rotate(45deg);
  }

  [data-slot~="tooltip-content"][data-side="right"] [data-slot~="tooltip-arrow"] {
    right: calc(100% - var(--ui-tooltip-arrow-size) / 2);
    left: auto;
    top: 50%;
    transform: translate(0%, -50%) rotate(45deg);
  }
}