.trigger {
  display: inline-flex;
  max-width: max-content;
}

/* Positioner uses CSS transform for floating-ui placement, which creates
   a new stacking context.  An explicit z-index ensures the tooltip paints
   above page elements that carry their own z-index (e.g. sticky headers,
   footers with z-index: 10). */
.positioner {
  z-index: 50;
}

.popup {
  position: relative;
  overflow: hidden;
  border-radius: var(--ac-radius-sm);
  background-color: var(--ac-foreground);
  color: var(--ac-background);
  padding: var(--ac-space-1) var(--ac-space-2);
  font-size: var(--ac-text-xs);
  line-height: 1.5;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  transform-origin: var(--transform-origin);
  transition: opacity var(--ac-transition-fast), transform var(--ac-transition-fast);

  /* Force all descendants (e.g. <code>, <strong>) to inherit the
     tooltip's inverted color scheme so consumer styles don't bleed in. */
  & * {
    color: inherit;
    background-color: transparent;
  }

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.96);
  }
}