/* Scoped styles for progressList plugin */
.progress-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-large);
}

.progress-list {
  flex: 0 0 300px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.progress-ring-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-ring {
  display: block;
  margin-bottom: var(--spacing-small);
}

.progress-info {
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.progress-list li {
  margin-bottom: var(--spacing-small);
  font-size: var(--font-size-small);
}

.progress-list label {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
}

.progress-list input[type="checkbox"] {
  width: var(--spacing-small);
  height: var(--spacing-small);
}

.progress-ring circle {
  fill: none;
  stroke-width: 10;
  transition: stroke-dashoffset var(--transition-duration);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.progress-ring .progress-bg {
  stroke: var(--bg-trans-primary);
}

.progress-ring .progress-bar {
  stroke: var(--color-info);
  stroke-linecap: round;
}