/* Opt-in icon actions share the existing 44px button and color/type tokens. */
.ui-v2 .ui-icon-action { position: relative; overflow: visible; }
.ui-icon-action[data-ui-tooltip]::after {
  content: attr(data-ui-tooltip);
  position: absolute;
  z-index: 100;
  inset-block-start: 100%;
  inset-inline-end: 0;
  margin-block-start: var(--ui-space-1);
  inline-size: max-content;
  max-inline-size: min(20rem, calc(100vw - 2rem));
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-fg-strong);
  color: var(--ui-fg-inverse);
  font-size: var(--ui-type-caption);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-body);
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  visibility: hidden;
  pointer-events: auto;
}
/* The bridge keeps the help visible while the pointer moves onto it. */
.ui-icon-action[data-ui-tooltip]::before {
  content: '';
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  block-size: var(--ui-space-1);
}
.ui-icon-action[data-ui-tooltip-align="start"]::after { inset-inline-start: 0; inset-inline-end: auto; }
.ui-icon-action[data-ui-tooltip]:is(:hover, :focus-visible):not([data-ui-tooltip-dismissed])::after { visibility: visible; }
.ui-icon-action[data-ui-tooltip][disabled]::after { visibility: hidden; }
.ui-icon-action > svg { pointer-events: none; }