/**
 * Progress Bar Component
Full accessibility support
 * Visually represents the completion of a task or process
 */

/* ========================================
   PROGRESS BAR CUSTOM PROPERTIES
   ======================================== */

.c-progress-bar {
  /* Base properties */
  --c-progress-bar-size: var(--ds-space-s);
  --c-progress-bar-border-radius: var(--ds-radius-s);
  --c-progress-bar-background: var(--ds-color-surface-weak);
  --c-progress-bar-color: var(--ds-color-primary);
  --c-progress-bar-text-color: var(--ds-color-text);
  --c-progress-bar-label-font-size: var(--ds-font-size-s);
  --c-progress-bar-label-font-weight: var(--ds-font-weight-normal);
  --c-progress-bar-label-margin: var(--ds-space-xs);
  
  /* Animation */
  --c-progress-bar-transition: width var(--ds-duration-normal) var(--ds-ease-out);
  --c-progress-bar-indeterminate-duration: 2s;
  
  /* Variants */
  --c-progress-bar-success-color: var(--ds-color-success);
  --c-progress-bar-warning-color: var(--ds-color-warning);
  --c-progress-bar-danger-color: var(--ds-color-danger);
}

/* ========================================
   BASE PROGRESS BAR STYLES
   ======================================== */

.c-progress-bar {
  display: flex;
  flex-direction: column;
  gap: var(--c-progress-bar-label-margin);
  width: 100%;
}

/* Progress bar label */
.c-progress-bar__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--c-progress-bar-label-font-size);
  font-weight: var(--c-progress-bar-label-font-weight);
  color: var(--c-progress-bar-text-color);
  margin: 0;
}

.c-progress-bar__label-text {
  flex: 1;
}

.c-progress-bar__label-value {
  font-weight: var(--ds-font-weight-semibold);
  color: var(--c-progress-bar-color);
}

/* Progress bar track */
.c-progress-bar__track {
  position: relative;
  width: 100%;
  height: var(--c-progress-bar-size);
  background: var(--c-progress-bar-background);
  border-radius: var(--c-progress-bar-border-radius);
  overflow: hidden;
}

/* Progress bar fill */
.c-progress-bar__fill {
  height: 100%;
  background: var(--c-progress-bar-color);
  border-radius: var(--c-progress-bar-border-radius);
  transition: var(--c-progress-bar-transition);
  width: 0%;
}

/* Native progress element (alternative implementation) */
.c-progress-bar__native {
  width: 100%;
  height: var(--c-progress-bar-size);
  border: none;
  border-radius: var(--c-progress-bar-border-radius);
  background: var(--c-progress-bar-background);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.c-progress-bar__native::-webkit-progress-bar {
  background: var(--c-progress-bar-background);
  border-radius: var(--c-progress-bar-border-radius);
}

.c-progress-bar__native::-webkit-progress-value {
  background: var(--c-progress-bar-color);
  border-radius: var(--c-progress-bar-border-radius);
  transition: var(--c-progress-bar-transition);
}

.c-progress-bar__native::-moz-progress-bar {
  background: var(--c-progress-bar-color);
  border-radius: var(--c-progress-bar-border-radius);
  transition: var(--c-progress-bar-transition);
}

/* ========================================
   SIZE VARIANTS
   ======================================== */

/* Extra small */
.c-progress-bar--size-xs {
  --c-progress-bar-size: 2px;
  --c-progress-bar-label-font-size: var(--ds-font-size-xs);
  --c-progress-bar-label-margin: var(--ds-space-xs);
}

/* Small */
.c-progress-bar--size-s {
  --c-progress-bar-size: 4px;
  --c-progress-bar-label-font-size: var(--ds-font-size-s);
  --c-progress-bar-label-margin: var(--ds-space-xs);
}

/* Medium (default) */
.c-progress-bar--size-m {
  --c-progress-bar-size: var(--ds-space-s);
  --c-progress-bar-label-font-size: var(--ds-font-size-s);
}

/* Large */
.c-progress-bar--size-l {
  --c-progress-bar-size: var(--ds-space-m);
  --c-progress-bar-label-font-size: var(--ds-font-size-m);
  --c-progress-bar-label-margin: var(--ds-space-s);
}

/* Extra large */
.c-progress-bar--size-xl {
  --c-progress-bar-size: var(--ds-space-l);
  --c-progress-bar-label-font-size: var(--ds-font-size-m);
  --c-progress-bar-label-margin: var(--ds-space-s);
}

/* ========================================
   COLOR VARIANTS
   ======================================== */

/* Success */
.c-progress-bar--success {
  --c-progress-bar-color: var(--c-progress-bar-success-color);
}

.c-progress-bar--success .c-progress-bar__label-value {
  color: var(--c-progress-bar-success-color);
}

/* Warning */
.c-progress-bar--warning {
  --c-progress-bar-color: var(--c-progress-bar-warning-color);
}

.c-progress-bar--warning .c-progress-bar__label-value {
  color: var(--c-progress-bar-warning-color);
}

/* Danger */
.c-progress-bar--danger {
  --c-progress-bar-color: var(--c-progress-bar-danger-color);
}

.c-progress-bar--danger .c-progress-bar__label-value {
  color: var(--c-progress-bar-danger-color);
}

/* ========================================
   INDETERMINATE STATE
   ======================================== */

.c-progress-bar--indeterminate .c-progress-bar__fill {
  width: 30%;
  animation: progress-indeterminate var(--c-progress-bar-indeterminate-duration) ease-in-out infinite;
}

.c-progress-bar--indeterminate .c-progress-bar__native {
  animation: progress-indeterminate-native var(--c-progress-bar-indeterminate-duration) ease-in-out infinite;
}

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

@keyframes progress-indeterminate-native {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

/* ========================================
   LAYOUT VARIANTS
   ======================================== */

/* No label */
.c-progress-bar--no-label .c-progress-bar__label {
  display: none;
}

/* Inline layout */
.c-progress-bar--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-space-m);
}

.c-progress-bar--inline .c-progress-bar__label {
  flex-shrink: 0;
  min-width: 0;
}

.c-progress-bar--inline .c-progress-bar__track {
  flex: 1;
}

/* Circular progress (for future enhancement) */
.c-progress-bar--circular {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: conic-gradient(
    var(--c-progress-bar-color) 0deg,
    var(--c-progress-bar-background) 0deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.c-progress-bar--circular::before {
  content: '';
  position: absolute;
  width: 70%;
  height: 70%;
  background: var(--ds-color-surface);
  border-radius: 50%;
}

.c-progress-bar--circular .c-progress-bar__label {
  position: relative;
  z-index: 1;
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-semibold);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .c-progress-bar--inline {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-space-s);
  }
  
  .c-progress-bar__label {
    font-size: var(--ds-font-size-s);
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Screen reader only content */
.c-progress-bar__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-progress-bar__track {
    border: 1px solid;
  }
  
  .c-progress-bar__fill {
    border: 1px solid var(--c-progress-bar-color);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-progress-bar,
  .c-progress-bar *,
  .c-progress-bar *::before,
  .c-progress-bar *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .c-progress-bar__fill {
    background: #000 !important;
  }
  
  .c-progress-bar__track {
    border: 1px solid #000 !important;
  }
  
  .c-progress-bar--indeterminate .c-progress-bar__fill {
    animation: none !important;
    width: 50% !important;
    transform: none !important;
  }
}

/* ========================================
   UTILITIES
   ======================================== */

/* Striped pattern */
.c-progress-bar--striped .c-progress-bar__fill {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.c-progress-bar--striped.c-progress-bar--animated .c-progress-bar__fill {
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1rem 0;
  }
}

/* Pulsing effect */
.c-progress-bar--pulse .c-progress-bar__fill {
  animation: progress-pulse 2s ease-in-out infinite;
}

@keyframes progress-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}