/**
 * @file
 * Styles for FFmpeg Media progress indicator.
 *
 * Uses Gin admin theme CSS variables for dark mode compatibility.
 */

.ffmpeg-media-progress {
  padding: 1rem;
  border-radius: var(--ffmpeg-radius-s, 6px);
  background: var(--ffmpeg-surface-2, #f5f5f5);
}

.ffmpeg-media-progress__status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: var(--ffmpeg-radius-s, 6px);
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
}

.ffmpeg-media-progress__status--pending {
  background: var(--ffmpeg-warning-bg, #fef3c7);
  color: var(--ffmpeg-warning, #f59e0b);
}

.ffmpeg-media-progress__status--converting {
  background: var(--ffmpeg-info-bg, #e0f2fe);
  color: var(--ffmpeg-info, #0ea5e9);
}

.ffmpeg-media-progress__status--completed {
  background: var(--ffmpeg-success-bg, #dcfce7);
  color: var(--ffmpeg-success, #16a34a);
}

.ffmpeg-media-progress__status--failed {
  background: var(--ffmpeg-danger-bg, #fee2e2);
  color: var(--ffmpeg-danger, #dc2626);
}

.ffmpeg-media-progress__bar {
  height: 8px;
  margin: 0.5rem 0;
  background: var(--ffmpeg-border, #e5e7eb);
  border-radius: var(--ffmpeg-radius-s, 6px);
  overflow: hidden;
}

.ffmpeg-media-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ffmpeg-accent, #2563eb), var(--ffmpeg-accent-hover, #1d4ed8));
  transition: width 0.5s ease;
}

.ffmpeg-media-progress__info {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--ffmpeg-text-muted, #6b7280);
}

.ffmpeg-media-progress__percent {
  font-weight: bold;
}

.ffmpeg-media-progress__error {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--ffmpeg-danger-bg, #fee2e2);
  border-radius: var(--ffmpeg-radius-s, 6px);
  color: var(--ffmpeg-danger, #dc2626);
  font-size: 0.875rem;
}

.ffmpeg-media-progress__none {
  color: var(--ffmpeg-text-muted, #6b7280);
  font-style: italic;
}

/* Video container styles */
.ffmpeg-media-video {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.ffmpeg-media-video video {
  width: 100%;
  height: auto;
  background: #000;
}

.ffmpeg-media-video__converting,
.ffmpeg-media-video__pending,
.ffmpeg-media-video__unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--ffmpeg-surface-2, #f5f5f5);
  border-radius: var(--ffmpeg-radius-s, 6px);
}

.ffmpeg-media-video__pending,
.ffmpeg-media-video__unavailable {
  color: var(--ffmpeg-text-muted, #6b7280);
  font-style: italic;
}
