/* ==========================================================================
   PROGRESS BAR
   Visual progress indicator with segments and labels
   ========================================================================== */

@layer components {
  /* Progress Bar */
  .progress-bar {
    display: flex;
    height: var(--progress-bar-height);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-ink-lightest);
    margin-bottom: var(--block-space);
  }

  .progress-bar__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
    min-width: 0;
  }

  .progress-bar__segment--primary {
    background: var(--color-ink);
    color: var(--color-ink-inverted);
  }

  .progress-bar__segment--secondary {
    background: var(--color-link);
    color: var(--color-ink-inverted);
  }

  .progress-bar__label {
    font-size: var(--text-caption);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 var(--inline-space-half);
  }

  /* Progress Bar Legend */
  .progress-bar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
    margin-top: var(--block-space-half);
  }

  .progress-bar__legend-item {
    display: flex;
    align-items: flex-start;
    gap: var(--inline-space-half);
    font-size: var(--text-footnote);
    line-height: var(--leading-normal);
  }

  .progress-bar__legend-color {
    width: var(--block-space);
    height: var(--block-space);
    border-radius: var(--block-space-quarter);
    flex-shrink: 0;
    margin-top: var(--block-space-quarter);
  }

  .progress-bar__legend-color--primary {
    background: var(--color-ink);
  }

  .progress-bar__legend-color--secondary {
    background: var(--color-link);
  }
}