.Root {
  color: var(--demo-neutral-fg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.Label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--demo-neutral-fg);
}

.CircleContainer {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.Circle {
  --size: 4rem;
  --thickness: 0.375rem;

  &[data-state='indeterminate'] {
    animation: circle-spin 2s linear infinite;
  }
}

.CircleTrack {
  stroke: var(--demo-neutral-muted);
}

.CircleRange {
  stroke: var(--demo-coral-solid);
  transition:
    stroke-dasharray 0.6s ease-out,
    stroke 0.6s ease-out;

  &[data-state='indeterminate'] {
    animation: circle-range-indeterminate 1.5s ease-in-out infinite;
  }
}

.ValueText {
  position: absolute;
  font-size: calc(var(--size) * 0.25);
  font-weight: 500;
  color: var(--demo-neutral-fg);
}

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

/* 
 * For --size: 4rem (64px), --thickness: 0.375rem (6px)
 * radius = (64 - 6) / 2 = 29px
 * circumference = 2 * π * 29 ≈ 182px
 */
@keyframes circle-range-indeterminate {
  0% {
    stroke-dasharray: 1px 181px;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 91px 91px;
    stroke-dashoffset: -45px;
  }
  100% {
    stroke-dasharray: 91px 91px;
    stroke-dashoffset: -182px;
  }
}
