// Progress component - Progress bars and indicators

/**
 * @section Progress Bar
 */

/** @public Base progress container */
.progress {
  width: 100%;
  height: 6px;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

/** @public Small progress bar (4px) */
.progress-sm {
  height: 4px;
}

/** @public Medium progress bar (6px) - default */
.progress-md {
  height: 6px;
}

/** @public Large progress bar (8px) */
.progress-lg {
  height: 8px;
}

/** @public Extra large progress bar (12px) */
.progress-xl {
  height: 12px;
}

/** @public Progress bar fill */
.progress-bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: hsl(var(--primary));
  transition: width 0.3s ease;
}

/** @public Primary color progress bar */
.progress-bar-primary {
  background: hsl(var(--primary));
}

/** @public Success color progress bar */
.progress-bar-success {
  background: hsl(var(--success));
}

/** @public Warning color progress bar */
.progress-bar-warning {
  background: hsl(var(--warning));
}

/** @public Destructive color progress bar */
.progress-bar-destructive {
  background: hsl(var(--destructive));
}

/** @public Blue progress bar */
.progress-bar-blue {
  background: hsl(221 83% 53%);
}

/** @public Orange progress bar */
.progress-bar-orange {
  background: hsl(25 95% 53%);
}

/** @public Green progress bar */
.progress-bar-green {
  background: hsl(84 81% 44%);
}

/** @public Indeterminate animated progress bar */
.progress-indeterminate {
  .progress-bar {
    width: 40% !important;
    animation: progress-indeterminate 1.5s ease-in-out infinite;
  }
}

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

/**
 * @section Segmented Indicator
 */

/** @public Segmented indicator container */
.indicator-segments {
  display: flex;
  gap: 4px;
  align-items: center;
}

/** @public Individual segment (24x6px) */
.indicator-segment {
  width: 24px;
  height: 6px;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;

  &.active {
    background: hsl(var(--success));
  }
}

/** @public Small segment (16x4px) */
.indicator-segment-sm {
  width: 16px;
  height: 4px;
}

/** @public Large segment (32x8px) */
.indicator-segment-lg {
  width: 32px;
  height: 8px;
}

/** @public Primary color segment */
.indicator-segment-primary.active {
  background: hsl(var(--primary));
}

/** @public Success color segment */
.indicator-segment-success.active {
  background: hsl(var(--success));
}

/** @public Warning color segment */
.indicator-segment-warning.active {
  background: hsl(var(--warning));
}

/** @public Destructive color segment */
.indicator-segment-destructive.active {
  background: hsl(var(--destructive));
}

/** @public Blue color segment */
.indicator-segment-blue.active {
  background: hsl(221 83% 53%);
}

/** @public Orange color segment */
.indicator-segment-orange.active {
  background: hsl(25 95% 53%);
}

/** @public Green color segment */
.indicator-segment-green.active {
  background: hsl(84 81% 44%);
}