/**
 * @file
 * Styles for progress bar component.
 */

.ffmpeg-progress {
  margin-bottom: 1rem;
}

.ffmpeg-progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--ffmpeg-text, #111827);
}

.ffmpeg-progress-status {
  font-weight: 600;
}

.ffmpeg-progress-track {
  height: 8px;
  background: var(--ffmpeg-border, #e5e7eb);
  border-radius: var(--ffmpeg-radius-s, 6px);
  overflow: hidden;
}

.ffmpeg-progress-fill {
  height: 100%;
  border-radius: var(--ffmpeg-radius-s, 6px);
  transition: width 0.3s ease;
}

.ffmpeg-progress--pending .ffmpeg-progress-fill {
  background: var(--ffmpeg-warning, #f59e0b);
}

.ffmpeg-progress--processing .ffmpeg-progress-fill {
  background: linear-gradient(90deg, var(--ffmpeg-accent, #2563eb), var(--ffmpeg-accent-hover, #1d4ed8), var(--ffmpeg-accent, #2563eb));
  background-size: 200% 100%;
}

.ffmpeg-progress--animated .ffmpeg-progress-fill {
  animation: progress-shimmer 1.5s infinite linear;
}

.ffmpeg-progress--completed .ffmpeg-progress-fill {
  background: var(--ffmpeg-success, #16a34a);
}

.ffmpeg-progress--failed .ffmpeg-progress-fill {
  background: var(--ffmpeg-danger, #dc2626);
}

.ffmpeg-progress--none .ffmpeg-progress-fill {
  background: var(--ffmpeg-border, #e5e7eb);
}

.ffmpeg-progress-message {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--ffmpeg-text-muted, #6b7280);
}

@keyframes progress-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }

/* Reduced motion: disable progress bar animation and transition */
@media (prefers-reduced-motion: reduce) {
  .ffmpeg-progress-fill {
    transition: none;
  }

  .ffmpeg-progress--animated .ffmpeg-progress-fill {
    animation: none;
  }
}
