/* ==========================================================================
   进度条组件 (Progress)
   ========================================================================== */

.zuoekai-progress {
  display: block;
  width: 100%;
  height: 8px;
  background-color: var(--zuoekai-color-surface-hover);
  border-radius: var(--zuoekai-radius-lg);
  overflow: hidden;
  position: relative;
}

/* 进度条轨道 */
.zuoekai-progress__bar {
  height: 100%;
  background-color: var(--zuoekai-color-brand-600);
  border-radius: inherit;
  transition: width 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- 尺寸 (Sizes) --- */

.zuoekai-progress--sm {
  height: 4px;
}

.zuoekai-progress--lg {
  height: 16px;
}

/* --- 颜色 (Colors) --- */

.zuoekai-progress--success .zuoekai-progress__bar { background-color: var(--zuoekai-color-success-600); }
.zuoekai-progress--warning .zuoekai-progress__bar { background-color: var(--zuoekai-color-warning-600); }
.zuoekai-progress--error .zuoekai-progress__bar { background-color: var(--zuoekai-color-error-600); }
.zuoekai-progress--info .zuoekai-progress__bar { background-color: var(--zuoekai-color-info-600); }

/* --- 变体 (Variants) --- */

/* 条纹 (Striped) */
.zuoekai-progress--striped .zuoekai-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;
}

/* 动画条纹 (Animated) */
.zuoekai-progress--animated .zuoekai-progress__bar {
  animation: zuoekai-progress-stripes 1s linear infinite;
}

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

/* 带标签 (Labeled) - 仅在 LG 尺寸下推荐 */
.zuoekai-progress--labeled .zuoekai-progress__bar {
  min-width: 2em; /* Ensure text fits */
}

/* 外部标签布局 */
.zuoekai-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.zuoekai-progress-wrapper .zuoekai-progress {
  flex: 1;
}
.zuoekai-progress-label {
  font-size: 13px;
  color: var(--zuoekai-color-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}