/* ==========================================================
   IROZON DESIGN SYSTEM — Loader (canonical, v1)
   Public API: <span class="iz-loader" role="status" aria-label="Loading">
   A quiet circular ring with one orbiting point — an "Irozon Orbit",
   not a generic browser spinner. Monochrome by default (currentColor),
   so context (a Green button, a dark surface, an error state) decides
   the color. Depends only on Irozon design tokens; no JS required.
   ========================================================== */

.iz-loader {
  --iz-loader-size: 32px;
  --iz-loader-ring-width: 3px;
  --iz-loader-dot-size: 6px;
  --iz-loader-duration: 1.4s;

  display: inline-block;
  position: relative;
  inline-size: var(--iz-loader-size);
  block-size: var(--iz-loader-size);
  color: currentColor;
  flex: none;
  animation: iz-loader-spin var(--iz-loader-duration) linear infinite;
}

/* Ring — a restrained, low-opacity currentColor circle. Rotating it
   along with the dot is free (a symmetric ring looks identical at any
   angle); only the dot's motion reads. */
.iz-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--iz-loader-ring-width) solid currentColor;
  opacity: 0.22;
}

/* The orbit point — full currentColor, sitting on the ring's
   centerline at 12 o'clock. Its apparent motion around the ring is
   just the whole element rotating. */
.iz-loader::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: calc(var(--iz-loader-ring-width) / 2 - var(--iz-loader-dot-size) / 2);
  margin-inline-start: calc(var(--iz-loader-dot-size) / -2);
  inline-size: var(--iz-loader-dot-size);
  block-size: var(--iz-loader-dot-size);
  border-radius: 50%;
  background: currentColor;
}

@keyframes iz-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Sizes ---------- */
/* Default requires no data-size attribute. */
.iz-loader[data-size="small"] {
  --iz-loader-size: 16px;
  --iz-loader-ring-width: 3px;
  --iz-loader-dot-size: 5px;
  --iz-loader-duration: 1.2s;
}
.iz-loader[data-size="large"] {
  --iz-loader-size: 48px;
  --iz-loader-ring-width: 3.5px;
  --iz-loader-dot-size: 8px;
  --iz-loader-duration: 1.6s;
}

/* ---------- Brand variant ----------
   Reserved for deliberate Irozon brand moments (app load, a branded
   processing screen, product splash) — never inside ordinary buttons.
   Personality comes from one precise point of Green energy on a
   theme-correct Ink/light ring, not a loud Green/Lime gradient. */
.iz-loader[data-variant="brand"] {
  /* The primitive, not --color-action-primary — this variant is a
     fixed Green brand moment, unrelated to Button's theme-adaptive
     Primary (which resolves to Ink on light surfaces as of v2). */
  color: var(--irozon-green);
}
.iz-loader[data-variant="brand"]::before {
  border-color: var(--color-text-primary);
  opacity: 0.24;
}

/* ---------- Reduced motion ----------
   Loading is communicated by role="status"/aria-busy regardless of
   motion — rotation is not required to understand the interface is
   busy. The ring + offset point stay as a static, legible indicator. */
@media (prefers-reduced-motion: reduce) {
  .iz-loader {
    animation: none;
  }
}