/* Upload progress bar styles
 * Uses CSS custom properties to avoid inline style manipulation
 */

.upload-progress-bar {
  @apply h-1 rounded-full transition-all duration-300;
  width: var(--progress, 0%);
}

/* Progress bar states with different colors */
.upload-progress-bar.queued {
  @apply bg-yellow-500;
}

.upload-progress-bar.uploading {
  @apply bg-blue-500;
}

.upload-progress-bar.complete {
  @apply bg-green-500;
  width: 100%;
}

.upload-progress-bar.error {
  @apply bg-red-500;
  width: 100%;
}

/* Container states */
.upload-container.drag-over {
  @apply border-blue-500 bg-blue-50;
}

@media (prefers-color-scheme: dark) {
  .upload-container.drag-over {
    @apply bg-blue-900/20;
  }
}

.upload-container.uploading {
  @apply border-blue-500 opacity-80;
}

.upload-container.success {
  @apply border-green-500;
}

.upload-container.success .success-icon {
  @apply block;
}

.upload-container.error {
  @apply border-red-500 bg-red-50;
}

@media (prefers-color-scheme: dark) {
  .upload-container.error {
    @apply bg-red-900/20;
  }
}

.upload-container.disabled {
  @apply opacity-50 pointer-events-none;
}

/* Smooth animations for progress */
@keyframes progress-fill {
  from {
    width: 0%;
  }
  to {
    width: var(--progress, 0%);
  }
}

.upload-progress-bar.animating {
  animation: progress-fill 0.3s ease-out;
}