/* One balloon per page, on the body in the top layer, so no card's overflow cuts it. */
.ds-tooltip {
  position: fixed;
  inset: auto;
  z-index: var(--ds-z-overlay);
  inline-size: max-content;
  max-inline-size: min(16rem, calc(100vw - 16px));
  margin: 0;
  padding: var(--ds-space-1) var(--ds-space-2);
  overflow: visible;
  border: 0;
  border-radius: var(--ds-radius-sm);
  /* No outline and no shadow: the balloon's own fill (--ds-tooltip-bg) is what sets it apart from whatever lies under it. */
  background: var(--ds-tooltip-bg);
  box-shadow: none;
  color: var(--ds-tooltip-text);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-regular);
  line-height: 1.35;
  text-wrap: balance;
  opacity: 0;
  transition: opacity var(--ds-duration-fast);

  &.is-open { opacity: 1; }
}

html[data-visual="v5"] .ds-tooltip {
  border-radius: var(--ds-radius-xl);
  font-size: var(--ds-font-size-compact);
  transition-timing-function: var(--ds-ease-out);
}

/* Lines instead of a sentence (ds_tooltip_rows): one item per line, and a line never breaks, so a long name can't read
   as two people; past the balloon's width it ends in an ellipsis (the whole list stays in the aria-label). Pills keep
   their own width. */
/* A line has no second line to go to, so the balloon of lines takes more room before it cuts one. */
.ds-tooltip:has(> .ds-tooltip__rows) { max-inline-size: min(22rem, calc(100vw - 16px)); }
.ds-tooltip__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-1); padding-block: 2px; text-align: start; }
.ds-tooltip__rows:has(> .ds-tooltip__row > .ds-chip) { justify-items: start; }
.ds-tooltip__row { display: flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; }
.ds-tooltip__text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The pill's ink mixes with the balloon's text, so it reads on the inverse fill. */
.ds-tooltip__row > .ds-chip--color { --chip-text: var(--ds-tooltip-text); }

@media (prefers-reduced-motion: reduce) {
  .ds-tooltip { transition: none; }
}