/* progress.css — extracted from progress.html */
/* Progress.css */
.progress {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-default);
}

/* 条纹变体 */
.progress--striped .progress__bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

/* 动画变体 */
.progress--animated .progress__bar {
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

/* 不同尺寸 */
.progress--sm {
  height: 4px;
}

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

/* 标签 */
.progress__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.progress__value {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* 不同颜色 */
.progress--success .progress__bar {
  background-color: var(--color-success);
}

.progress--warning .progress__bar {
  background-color: var(--color-warning);
}

.progress--danger .progress__bar {
  background-color: var(--color-danger);
}