/**
 * @file
 * Styles for transcoded output list component.
 */

.ffmpeg-output-list h3 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ffmpeg-title, #111827);
}

.ffmpeg-output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

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

.ffmpeg-output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.ffmpeg-output-type {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ffmpeg-title, #111827);
}

.ffmpeg-output-count {
  font-size: 0.75rem;
  color: var(--ffmpeg-text-muted, #6b7280);
}

.ffmpeg-output-files {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ffmpeg-output-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid var(--ffmpeg-border, #e5e7eb);
}

.ffmpeg-output-file:first-child {
  border-top: none;
  padding-top: 0;
}

.ffmpeg-file-link {
  color: var(--ffmpeg-accent, #2563eb);
  text-decoration: none;
  font-size: 0.875rem;
  word-break: break-all;
}

.ffmpeg-file-link:hover {
  text-decoration: underline;
}

.ffmpeg-file-size {
  font-size: 0.75rem;
  color: var(--ffmpeg-text-muted, #6b7280);
  white-space: nowrap;
  margin-inline-start: 1rem;
}

/* Type-specific colors */
.ffmpeg-output-item--mp4 {
  border-inline-start: 3px solid var(--ffmpeg-accent-mp4, #3b82f6);
}

.ffmpeg-output-item--webm {
  border-inline-start: 3px solid var(--ffmpeg-accent-webm, #10b981);
}

.ffmpeg-output-item--thumbnail {
  border-inline-start: 3px solid var(--ffmpeg-warning, #f59e0b);
}

.ffmpeg-output-item--hls {
  border-inline-start: 3px solid var(--ffmpeg-accent-hls, #8b5cf6);
}

.ffmpeg-output-item--dash {
  border-inline-start: 3px solid var(--ffmpeg-accent-dash, #ec4899);
}

.ffmpeg-output-item--mkv {
  border-inline-start: 3px solid var(--ffmpeg-accent-mkv, #f97316);
}

.ffmpeg-output-item--flv {
  border-inline-start: 3px solid var(--ffmpeg-accent-flv, #ef4444);
}

.ffmpeg-output-item--jxl {
  border-inline-start: 3px solid var(--ffmpeg-accent-jxl, #0d9488);
}

.ffmpeg-output-item--transcript {
  border-inline-start: 3px solid var(--ffmpeg-accent-transcript, #0891b2);
}

.ffmpeg-output-item--metadata {
  border-inline-start: 3px solid var(--ffmpeg-accent-metadata, #64748b);
}
