/* Circle Loader — unified SVG spinner component
 * Sizes: sm (20px), md (36px), lg (48px), xl (64px)
 * Colors: gray, teal, coral, white
 */

.pp-circle-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pp-circle-loader svg {
  display: block;
  animation: pp-circle-spin 0.8s linear infinite;
}

/* ── Size modifiers ── */
.pp-circle-loader--sm { width: 20px; height: 20px; }
.pp-circle-loader--md { width: 36px; height: 36px; }
.pp-circle-loader--lg { width: 48px; height: 48px; }
.pp-circle-loader--xl { width: 64px; height: 64px; }

.pp-circle-loader--sm svg,
.pp-circle-loader--md svg,
.pp-circle-loader--lg svg,
.pp-circle-loader--xl svg {
  width: 100%;
  height: 100%;
}

/* ── Track circle (background ring) ── */
.pp-circle-loader__track {
  fill: none;
  stroke: var(--Color-Primary-Neutral-400);
  stroke-width: 4;
}

/* ── Spinner circle (animated arc) ── */
.pp-circle-loader__spinner {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 90, 126;
  stroke-dashoffset: 0;
}

/* ── Color modifiers ── */
.pp-circle-loader--teal .pp-circle-loader__spinner {
  stroke: var(--Color-Brand-Teal-600);
}

.pp-circle-loader--coral .pp-circle-loader__spinner {
  stroke: var(--Color-Primary-Red-600);
}

.pp-circle-loader--white .pp-circle-loader__spinner {
  stroke: var(--Color-Primary-White);
}

.pp-circle-loader--gray .pp-circle-loader__spinner {
  stroke: var(--Color-Primary-Neutral-400);
}

/* Gray variant uses a lighter track to maintain contrast */
.pp-circle-loader--gray .pp-circle-loader__track {
  stroke: var(--Color-Primary-Neutral-300);
}

/* White variant uses a semi-transparent white track */
.pp-circle-loader--white .pp-circle-loader__track {
  stroke: var(--Color-Primary-White-30);
}

/* ── Spin keyframes ── */
@keyframes pp-circle-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .pp-circle-loader svg {
    animation: none !important;
  }
}