/**
 * Progress styles
 * @countermeasure/web-components/display/progress
 */

/* ============================================================================
   PROGRESS BASE
   ============================================================================ */
.cmm-progress {
  position: relative;
}

/* ============================================================================
   LINEAR VARIANT
   ============================================================================ */
.cmm-progress--linear {
  width: 100%;
}

.cmm-progress__track {
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  overflow: hidden;
}

.cmm-progress--sm .cmm-progress__track {
  height: 4px;
}

.cmm-progress--md .cmm-progress__track {
  height: 8px;
}

.cmm-progress--lg .cmm-progress__track {
  height: 12px;
}

.cmm-progress__fill {
  height: 100%;
  background-color: var(--cmm-progress-color, hsl(var(--primary)));
  border-radius: 9999px;
  transition: width var(--transition-normal);
}

.cmm-progress__label {
  display: block;
  font-size: 0.75rem;
  color: hsl(var(--text-secondary));
  margin-top: 0.25rem;
  text-align: right;
}

/* Linear indeterminate */
.cmm-progress--indeterminate .cmm-progress__fill {
  width: 40%;
  animation: cmm-progress-slide 1.5s ease-in-out infinite;
}

@keyframes cmm-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

/* ============================================================================
   CIRCULAR VARIANT
   ============================================================================ */
.cmm-progress--circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmm-progress--circular svg {
  transform: rotate(-90deg);
}

.cmm-progress--circular.cmm-progress--sm svg {
  width: 32px;
  height: 32px;
}

.cmm-progress--circular.cmm-progress--md svg {
  width: 48px;
  height: 48px;
}

.cmm-progress--circular.cmm-progress--lg svg {
  width: 64px;
  height: 64px;
}

.cmm-progress__circle-bg {
  stroke: hsl(var(--muted));
  fill: none;
}

.cmm-progress__circle-fill {
  stroke: var(--cmm-progress-color, hsl(var(--primary)));
  fill: none;
  transition: stroke-dashoffset var(--transition-normal);
  stroke-linecap: round;
}

.cmm-progress__circle-label {
  font-size: 0.625rem;
  fill: hsl(var(--foreground));
  text-anchor: middle;
  dominant-baseline: central;
  transform: rotate(90deg);
  transform-origin: center;
}

/* Circular indeterminate */
.cmm-progress--circular.cmm-progress--indeterminate svg {
  animation: cmm-progress-spin 1.5s linear infinite;
}

@keyframes cmm-progress-spin {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
