/* VERIFIED MOTION KIT. MOTION-owned (see js/motion-kit.js for the API and rules).

   The kit animates with inline opacity / translate / scale / height, so this file only holds
   the few states it toggles. Low specificity (:where) so DS component rules always win.
   No html / body / :root dependencies: works in the popup and inside a shadow root. */

/* pending(el, true): the control keeps focus and its place, clicks are swallowed by the kit. */
:where(.mk-pending) { cursor: progress; }

/* The loader the kit inserts when a control has no icon of its own. Trimmed so a 20px sheet
   never grows a 10 to 12px text line (no layout shift when it appears). */
:where(.mk-pending-icon) {
  margin: calc(var(--icon-trim, 3px) * -1);
  margin-inline-end: calc(var(--s-1, 5px) - var(--icon-trim, 3px));
}

/* swapText() wraps an element's own text in this span when the element also holds icons. */
:where([data-mk-text]) { display: inline; }

@media (prefers-reduced-motion: reduce) {
  /* The kit already skips animation here; this guards against stale inline styles. */
  :where(.mk-pending-icon) { animation: none; }
}