.tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  white-space: nowrap;
  color: light-dark(var(--color-gray-700), var(--color-zinc-200));
  background-color: light-dark(var(--color-white), var(--color-zinc-800));
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.08s ease-out,
    transform 0.08s ease-out,
    display 0.08s allow-discrete,
    overlay 0.08s allow-discrete;
  pointer-events: auto;
  max-width: calc(100vw - 16px);

  &:popover-open {
    opacity: 1;
    transform: scale(1);
  }

  &::backdrop {
    background-color: transparent;
    pointer-events: none;
  }

  &:not(:popover-open) {
    /* Park far offscreen when closed so we never get a flash at 0,0 */
    top: -9999px !important;
    left: -9999px !important;
  }

  &.hiding {
    opacity: 0 !important;
    transform: scale(0.96) !important;
    transition:
      opacity 0.08s ease-out,
      transform 0.08s ease-out;
  }
}

@starting-style {
  .tooltip:popover-open {
    opacity: 0;
    transform: scale(0.96);
  }
}