@layer components {
  /* ============================================================================
   * PROGRESS BAR COMPONENT
   * Visual progress indicator
   * ========================================================================= */

  .progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
  }

  /* Label container */
  .progress__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-dark);
  }

  /* Percentage text */
  .progress__percentage {
    font-size: var(--font-size-sm);
    color: var(--color-gray-3);
    font-weight: var(--font-weight-semibold);
  }

  /* Track (background) */
  .progress__track {
    width: 100%;
    background-color: var(--color-gray-1);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  /* Track size variants */
  .progress__track--sm {
    height: 0.5rem;
  }

  .progress__track--md {
    height: 0.75rem;
  }

  .progress__track--lg {
    height: 1rem;
  }

  /* Progress bar (foreground) */
  .progress__bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    transition: width var(--transition-normal);
    position: relative;
  }

  /* Percentage inside bar */
  .progress__percentage-inner {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  /* ============================================================================
   * COLOR VARIANTS
   * Use -dark variants for semantic consistency with other components
   * ========================================================================= */

  .progress__bar--primary {
    background-color: var(--color-brand);
  }

  .progress__bar--success {
    background-color: var(--color-positive);
  }

  .progress__bar--warning {
    background-color: var(--color-warning-dark);
  }

  .progress__bar--error {
    background-color: var(--color-negative);
  }

  .progress__bar--info {
    background-color: var(--color-info);
  }

  /* ============================================================================
   * STRIPED PATTERN
   * ========================================================================= */

  .progress__bar--striped {
    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;
  }

  /* Animated stripes */
  .progress__bar--animated {
    animation: progress-stripes 1s linear infinite;
  }

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

    100% {
      background-position: 1rem 0;
    }
  }

  /* ============================================================================
   * DARK MODE ADJUSTMENTS
   * ========================================================================= */

  @media (prefers-color-scheme: dark) {
    .progress__track {
      background-color: var(
        --color-gray-2
      ); /* Darker gray for better contrast in dark mode */
    }
  }
}