/*
Tooltip

<div class="tooltip-provider" data-tooltip-provider>  optional; display: contents
<div class="tooltip-root" data-popover-root>          display: contents
  <span class="tooltip-trigger" data-popover-trigger> slot "trigger"
  <div class="tooltip" popover="manual" role="tooltip" data-state data-side data-align>
    <span class="tooltip-arrow" data-popover-arrow>
    content

data-overflowing is set while the content is taller than the room its
side has; the tooltip then scrolls and drops its arrow.

data-state is "delayed-open" (animates in), "instant-open" (no
animation: another tooltip was just showing) or "closed" (animates out).
Colors are --tooltip-bg and --tooltip-ink, an inverse of the page.
*/

@layer components {

.tooltip-provider,
.tooltip-root,
.tooltip-trigger {
  display: contents;
}

.tooltip {
  --tooltip-arrow-size: var(--space-2-5);

  box-sizing:       border-box;
  width:            max-content;
  max-width:        min(var(--container-xs), var(--available-width, 100vw));
  padding:          var(--space-1-5) var(--space-3);
  overflow:         visible;
  color:            var(--tooltip-ink);
  background:       var(--tooltip-bg);
  border:           0;
  border-radius:    var(--radius-overlay);
  font-family:      var(--font-ui);
  font-size:        var(--text-ui-sm);
  font-weight:      var(--weight-body);
  letter-spacing:   var(--tracking-ui);
  line-height:      var(--leading-snug);
  overflow-wrap:    anywhere;
  text-wrap:        balance;
  pointer-events:   auto;
  transform-origin: var(--transform-origin);
}

/* Taller than the room its side has (data-overflowing, set by the
   controller): it scrolls inside --available-height. The arrow would be
   clipped by the scroll box, so it goes while the content scrolls. */
.tooltip[data-overflowing] {
  max-height: var(--available-height);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tooltip[data-overflowing] > .tooltip-arrow {
  display: none;
}

/* A shortcut shown in the tooltip: reads on the inverse fill. */
.tooltip kbd,
.tooltip-kbd {
  display:        inline-flex;
  align-items:    center;
  margin-inline-start: var(--space-1-5);
  padding:        0 var(--space-1);
  min-height:     calc(var(--text-ui-sm) * 1.5);
  border:         0;
  border-radius:  var(--radius-tag);
  background:     color-mix(in srgb, var(--tooltip-ink) 18%, transparent);
  color:          var(--tooltip-ink);
  font-family:    var(--font-mono);
  font-size:      var(--text-ui-sm);
  box-shadow:     none;
}

.tooltip-arrow {
  width:          var(--tooltip-arrow-size);
  height:         var(--tooltip-arrow-size);
  background:     var(--tooltip-bg);
  border-radius:  calc(var(--radius-overlay) / 4);
  transform:      rotate(45deg);
  pointer-events: none;
}

.tooltip-arrow[data-side="bottom"] { top:    calc(var(--tooltip-arrow-size) / -2); }
.tooltip-arrow[data-side="top"]    { bottom: calc(var(--tooltip-arrow-size) / -2); }
.tooltip-arrow[data-side="right"]  { left:   calc(var(--tooltip-arrow-size) / -2); }
.tooltip-arrow[data-side="left"]   { right:  calc(var(--tooltip-arrow-size) / -2); }

/* Motion */

.tooltip[data-side="bottom"] { --tooltip-slide-x: 0; --tooltip-slide-y: calc(var(--enter-distance) * -0.5); }
.tooltip[data-side="top"]    { --tooltip-slide-x: 0; --tooltip-slide-y: calc(var(--enter-distance) * 0.5); }
.tooltip[data-side="right"]  { --tooltip-slide-x: calc(var(--enter-distance) * -0.5); --tooltip-slide-y: 0; }
.tooltip[data-side="left"]   { --tooltip-slide-x: calc(var(--enter-distance) * 0.5); --tooltip-slide-y: 0; }

.tooltip[data-state="delayed-open"] {
  animation: tooltip-in var(--duration-enter) var(--ease-enter);
}

.tooltip[data-state="closed"] {
  animation: tooltip-out var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes tooltip-in {
  from {
    opacity:   0;
    transform: translate(var(--tooltip-slide-x, 0), var(--tooltip-slide-y, 0)) scale(var(--enter-scale));
  }
}

@keyframes tooltip-out {
  to {
    opacity:   0;
    transform: scale(var(--enter-scale));
  }
}

/* Forced colors (Windows High Contrast) paints the inverse fill as Canvas,
   the page color, and drops box-shadow, so the tooltip would have no edge.
   An outline in the text color frames it; an outline takes no layout. */
@media (forced-colors: active) {
  .tooltip {
    outline: var(--overlay-border-width) solid CanvasText;
  }
}

}