/**
 * Airtime Design System v3 - Loader
 * Figma: https://www.figma.com/design/4ycNiPIJ2oXZVaCwaECbUa/Airtime-apps-design-system?node-id=1-1624
 *
 * Requires: generated/tokens.css
 *
 * Variants:  .loader      16×16px spinning indicator
 *            .loader-lg   24×24px spinning indicator
 *
 * ── HTML examples ─────────────────────────────────────
 *
 *   <span class="loader" aria-label="Loading"></span>
 *   <span class="loader loader-lg" aria-label="Loading"></span>
 */

/* ════════════════════════════════════════════════════
   LOADER
   ════════════════════════════════════════════════════ */

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

.loader {
  display: inline-block;
  flex-shrink: 0;
  width: var(--size-40);                             /* 16px */
  height: var(--size-40);                            /* 16px */
  border-radius: var(--radius-9999);
  background: conic-gradient(
    var(--color-accent-teal) 270deg,
    transparent 270deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), white calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), white calc(100% - 1.5px));
  animation: loader-spin var(--duration-slow) linear infinite;
}

.loader-lg {
  width: var(--size-60);                             /* 24px */
  height: var(--size-60);                            /* 24px */
}