/* =========================================================
   Button "processing" state — ONE look for every button
   ---------------------------------------------------------
   js/core/button-loading.js adds .is-busy to a button the moment
   it starts processing (it gets disabled after a click, a form is
   submitted, it gets data-loading="true", or a legacy ".loading"
   class). The button shows three breathing dots — the same
   "breathing wave" language as the shared loader in loader.css —
   in front of its label, in whatever colour the button's text is.

   Pure CSS (a single ::before), so it survives modules that
   rewrite the label (e.g. btn.textContent = 'Saving…') and works
   on primary / secondary / danger / small / pill / marketing
   buttons alike. No per-module code needed.
   ========================================================= */
button.is-busy,
[role="button"].is-busy{
  cursor:progress;
}
/* a disabled button is normally dimmed hard — keep a busy one lively so the animation reads */
button.is-busy:disabled{
  opacity:.9;
}
/* the primary button's hover glint would fight the loader */
button.is-busy::after{display:none;}

button.is-busy:not(.is-busy-icon)::before,
[role="button"].is-busy:not(.is-busy-icon)::before{
  content:"";
  flex:0 0 auto;
  display:inline-block;
  width:4px; height:4px;
  margin:0 15px 0 9px;          /* room for the dots on both sides of the 4px anchor */
  border-radius:50%;
  background:currentColor;
  color:inherit;
  /* three dots: the element itself is the centre dot, the left / right ones are box-shadows;
     each grows (shadow spread) in turn */
  box-shadow:-8px 0 0 0 currentColor, 0 0 0 0 currentColor, 8px 0 0 0 currentColor;
  animation:btnBusyWave 1.2s ease-in-out infinite;
  vertical-align:middle;
}
/* icon-only buttons (no text): hide the glyph, centre the dots */
button.is-busy.is-busy-icon,
[role="button"].is-busy.is-busy-icon{position:relative;}
button.is-busy.is-busy-icon > *,
[role="button"].is-busy.is-busy-icon > *{visibility:hidden;}
button.is-busy.is-busy-icon::before,
[role="button"].is-busy.is-busy-icon::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:4px; height:4px; margin:-2px 0 0 -2px;
  border-radius:50%;
  background:currentColor;
  box-shadow:-8px 0 0 0 currentColor, 0 0 0 0 currentColor, 8px 0 0 0 currentColor;
  animation:btnBusyWave 1.2s ease-in-out infinite;
}

@keyframes btnBusyWave{
  0%,100%{ box-shadow:-8px 0 0 1.4px currentColor, 0 0 0 0 currentColor,    8px 0 0 0 currentColor; }
  33%    { box-shadow:-8px 0 0 0 currentColor,    0 0 0 1.4px currentColor, 8px 0 0 0 currentColor; }
  66%    { box-shadow:-8px 0 0 0 currentColor,    0 0 0 0 currentColor,    8px 0 0 1.4px currentColor; }
}

@media (prefers-reduced-motion:reduce){
  button.is-busy::before,
  [role="button"].is-busy::before{
    animation:none;
    box-shadow:-8px 0 0 .7px currentColor, 0 0 0 .7px currentColor, 8px 0 0 .7px currentColor;
  }
}