/* ProgressBar Atom */
.progress-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.progress-bar-track {
  flex: 1;
  background-color: var(--bg-panel);        /* Panel color for track background */
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--border-radius-full);
  transition: width var(--duration-300) var(--easing-out);
}

.progress-bar-label {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  min-width: var(--space-10);
  text-align: right;
}

.progress-bar-sm .progress-bar-track { height: var(--space-1); }
.progress-bar-md .progress-bar-track { height: var(--space-1_5); }
.progress-bar-lg .progress-bar-track { height: var(--space-2); }

.progress-bar-primary .progress-bar-fill { background-color: var(--color-primary); }
.progress-bar-success .progress-bar-fill { background-color: var(--color-success); }
.progress-bar-warning .progress-bar-fill { background-color: var(--color-warning); }
.progress-bar-error .progress-bar-fill { background-color: var(--color-error); }

.progress-bar-indeterminate .progress-bar-fill {
  width: 30% !important;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(350%); }
  100% { transform: translateX(-100%); }
}