/* ==========================================================================
   Legacy dots shim.

   `.p-dots` / `.p-dot` were the original inline loading dots, inlined by hand
   into ~20 templates via innerHTML. They now render through the canonical
   definition in loading.css — same keyframes, same metrics — so the two class
   names are visually identical and only one animation is defined.

   New code should call FastnetLoading.button(el, on) instead of writing this
   markup. This file exists only so existing call sites keep working.
   ========================================================================== */

.p-dots,
.fn-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  vertical-align: middle;
  line-height: 0;
}

/* Legacy dots kept their explicit brand colour; the canonical .fn-dots uses
   currentColor so it adapts to whatever it is mounted in. */
.p-dots > .p-dot,
.p-dots .p-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #0f62fe;
  will-change: transform, opacity;
  animation: fn-breathe 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.p-dots > .p-dot:nth-child(2),
.p-dots .p-dot:nth-child(2) { animation-delay: 0.14s; }

.p-dots > .p-dot:nth-child(3),
.p-dots .p-dot:nth-child(3) { animation-delay: 0.28s; }

/* Compact variant for icon slots and inline rows */
.p-dots.sm { gap: 3px; }
.p-dots.sm > .p-dot,
.p-dots.sm .p-dot { width: 4px; height: 4px; }

/* Legacy: explicit colour class predates currentColor-based dots. */
.p-dots.on-dark > .p-dot,
.p-dots.on-dark .p-dot { background-color: #fff; }

/* ── Context colouring: dots on a filled button inherit its text colour ──── */
button .p-dots,
.btn .p-dots,
.p-btn .p-dots,
.cx-btn .p-dots { margin-right: 5px; }

.btn-primary .p-dots > .p-dot,
.btn-primary .p-dots .p-dot,
.btn-dark .p-dots > .p-dot,
.btn-dark .p-dots .p-dot,
.cx-btn .p-dots > .p-dot,
.cx-btn .p-dots .p-dot,
.p-btn:not(.ghost) .p-dots > .p-dot,
.p-btn:not(.ghost) .p-dots .p-dot { background-color: #fff; }

.p-btn.ghost .p-dots > .p-dot,
.p-btn.ghost .p-dots .p-dot { background-color: #0f62fe; }

button[disabled] { cursor: wait; }

/* Reduced motion is handled centrally in loading.css for both class names;
   this block keeps pre-existing dots static even if that file fails to load. */
@media (prefers-reduced-motion: reduce) {
  .p-dots > .p-dot,
  .p-dots .p-dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}