/* ring: commons
 * seed: snap
 * still: ./still.md
 * reduced: instant (no scale, no travel)
 * when-not: touch-coarse (tap sheet, not hover), content that must read without hovering, scale(0)
 *
 * C-TOOLTIP — melon-06 origin-aware pop + caret. (hover: hover) and (pointer: fine) only.
 */

[data-c-tooltip] {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

[data-c-tooltip-pop] {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 6;
  box-sizing: border-box;
  width: max-content;
  max-width: min(220px, calc(100vw - 32px));
  padding: 8px 12px;
  border-radius: var(--os-radius-sm);
  background: var(--os-ink);
  color: var(--os-ground);
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(4px) scale(0.96);
  transform-origin: bottom center;
  transition:
    opacity var(--ss-snap-duration, 180ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1)),
    transform var(--ss-snap-duration, 180ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1));
}

[data-c-tooltip-pop] .c-tooltip-caret {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--os-ink);
  transform: rotate(45deg);
}

[data-c-tooltip][data-place="below"] [data-c-tooltip-pop] {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px) scale(0.96);
  transform-origin: top center;
}

[data-c-tooltip][data-place="below"] [data-c-tooltip-pop] .c-tooltip-caret {
  bottom: auto;
  top: -4px;
}

[data-c-tooltip][data-open] [data-c-tooltip-pop] {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

[data-c-tooltip][data-instant] [data-c-tooltip-pop] {
  transition-duration: 0ms;
}

[data-c-tooltip-trigger]:focus-visible {
  outline: var(--os-focus-ring-width) solid var(--os-focus-ring-color);
  outline-offset: var(--os-focus-ring-offset);
}

@media (hover: none), (pointer: coarse) {
  [data-c-tooltip-pop] {
    display: none !important;
  }
}

html[data-theme="night"] [data-c-tooltip-pop],
html[data-night="1"] [data-c-tooltip-pop] {
  background: var(--os-ground);
  color: var(--os-ground-void);
}

html[data-theme="night"] [data-c-tooltip-pop] .c-tooltip-caret,
html[data-night="1"] [data-c-tooltip-pop] .c-tooltip-caret {
  background: var(--os-ground);
}