/* loaders.css — ONE loader for the whole app (2026-10-07, explicit request:
   "I like the dots loader that plays around"): 8 dots on a circle, the
   bright one chasing around (stepped rotation). Pure CSS, single element,
   coloured by currentColor, sized by font-size — so it replaces, without
   touching any module's markup:
     • .km-adm-loading <i class="fa-spinner fa-spin">  (module / list loading)
     • any <i class="fa(s|-solid) fa-spinner fa-spin"> (erp, vr, inline spinners)
     • .km-spinner                                       (small inline loader)
     • .km-btn--loading                                   (kmBtnLoading buttons)
   Use it directly with <span class="km-dots"></span>. Loaded globally after
   buttons.css / feedback.css so it wins over their old ring spinners. */

@keyframes km-dots-orbit { to { transform: rotate(360deg); } }

/* The dot "ring", drawn as one tiny centred dot + 8 box-shadows. Rotating it
   around its own centre with steps(8) makes the bright dot jump from place
   to place — the "playing around" effect. */
.km-dots,
.km-spinner,
.fa-spinner.fa-spin {
  display: inline-block;
  position: relative;
  width: 1em; height: 1em;
  vertical-align: -.15em;
  border: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
  background: none !important;
}
.km-dots::before,
.km-spinner::before,
.fa-spinner.fa-spin::before,
.km-btn--loading::after {
  content: '' !important;
  position: absolute;
  top: 50%; left: 50%;
  width: .2em; height: .2em;
  margin: -.1em 0 0 -.1em;
  border-radius: 50%;
  background: transparent;
  font-family: inherit !important;
  box-shadow:
    0 -.42em 0 0 currentColor,
    .297em -.297em 0 0 color-mix(in srgb, currentColor 86%, transparent),
    .42em 0 0 0 color-mix(in srgb, currentColor 72%, transparent),
    .297em .297em 0 0 color-mix(in srgb, currentColor 58%, transparent),
    0 .42em 0 0 color-mix(in srgb, currentColor 45%, transparent),
    -.297em .297em 0 0 color-mix(in srgb, currentColor 33%, transparent),
    -.42em 0 0 0 color-mix(in srgb, currentColor 22%, transparent),
    -.297em -.297em 0 0 color-mix(in srgb, currentColor 13%, transparent);
  animation: km-dots-orbit .85s steps(8) infinite;
}

/* Small inline loader */
.km-spinner { font-size: 16px; }

/* Big module / list loader */
.km-adm-loading i.fa-spinner {
  font-size: 48px !important;
  width: 1em !important; height: 1em !important;
  color: var(--accent);
}

/* Buttons (kmBtnLoading): the dots replace the old ring, sized to the text */
.km-btn--loading { position: relative; }
.km-btn--loading::after {
  position: relative;
  display: inline-block;
  inset: auto;
  margin: 0 0 0 .7em;
  font-size: 1.05em;
  vertical-align: middle;
  border: 0 !important;
  /* The click-wave rule (buttons.css `.km-btn::after`) shares this pseudo-element
     and sets opacity:0 + a gradient background — without this reset the dots were
     invisible on every kmBtnLoading button (found 2026-10-18 on cm/vm4 Envoyer). */
  opacity: 1;
  z-index: 2;
}
/* A loading button is disabled by kmBtnLoading(), but must not look "dead" —
   keep it fully visible so the user sees it is working. */
.km-btn.km-btn--loading:disabled { opacity: 1; cursor: progress; }
[dir="rtl"] .km-btn--loading::after { margin: 0 .7em 0 0; }
/* Inline icon spinners inside buttons keep the button's text colour */
.km-btn .fa-spinner.fa-spin { font-size: 1.05em; }