.container {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}

.progressBar {
  --progress-separator: color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
  --progress-track: color-mix(in srgb, var(--color-fg-default) 10%, var(--color-bg-surface-subtle));
  --progress-fill-done: color-mix(
    in srgb,
    var(--color-fg-default) 12%,
    var(--color-bg-surface-subtle)
  );
  --progress-fill-progress: color-mix(
    in srgb,
    var(--color-status-success) 42%,
    var(--color-bg-surface-subtle)
  );
  --progress-fill-missing: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
  --progress-fill-neutral: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
  --progress-fill-success: color-mix(in srgb, var(--color-status-success) 95%, transparent);
  --progress-fill-info: color-mix(in srgb, var(--color-status-info) 70%, transparent);
  --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 70%, transparent);
  --progress-fill-error: color-mix(in srgb, var(--color-status-error) 75%, transparent);
  --progress-fill-accent: color-mix(in srgb, var(--color-accent) 75%, transparent);

  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;

  border-radius: calc(var(--progress-height, 30px) / 2);
  background: var(--progress-track);
}

.progressBar[data-rounded='false'] {
  border-radius: 0;
}

.segmentsContainer {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.segmentWrapper {
  display: flex;
  height: 100%;
  min-width: 2px;
  min-height: 0;
}

.progressSegment {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--segment-color, var(--color-bg-surface-strong));
}

/* Subtle separators between segments */
.segmentWrapper + .segmentWrapper .progressSegment::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 2px;
  width: 1px;
  background: var(--progress-separator);
  pointer-events: none;
}

/* =====================================
   Custom progress semantics (quiet)
   ===================================== */

.progressSegment[data-severity='done'] {
  background: var(--progress-fill-done);
}

.progressSegment[data-severity='progress'] {
  background: var(--progress-fill-progress);
}

.progressSegment[data-severity='missing'] {
  background: var(--progress-fill-missing);
}

.progressSegment[data-severity='neutral'] {
  background: var(--progress-fill-neutral);
}

/* =====================================
   Existing semantic severities
   Keep these semantic and more colorful
   for consumers who want that behavior
   ===================================== */

.progressSegment[data-severity='success'] {
  background: var(--progress-fill-success);
}

.progressSegment[data-severity='info'] {
  background: var(--progress-fill-info);
}

.progressSegment[data-severity='warning'] {
  background: var(--progress-fill-warning);
}

.progressSegment[data-severity='error'] {
  background: var(--progress-fill-error);
}

.progressSegment[data-severity='accent'] {
  background: var(--progress-fill-accent);
}

/* Label overlay */
.progressCenter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  pointer-events: none;
}

.progressCenterLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: calc(100% - 8px);
  color: var(--color-fg-default);
  font-size: var(--font-size-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  text-shadow: none;
}

.emptySegments .progressCenterLabel {
  color: var(--color-fg-subtle);
}

/* Rounded ends only on the outer edges */
.segmentWrapper:first-child .progressSegment {
  border-top-left-radius: var(--progress-radius);
  border-bottom-left-radius: var(--progress-radius);
}

.segmentWrapper:last-child .progressSegment {
  border-top-right-radius: var(--progress-radius);
  border-bottom-right-radius: var(--progress-radius);
}

.progressBar[data-rounded='false'] .segmentWrapper:first-child .progressSegment,
.progressBar[data-rounded='false'] .segmentWrapper:last-child .progressSegment {
  border-radius: 0;
}

.progressBar,
.progressSegment,
.progressCenterLabel {
  transition:
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .progressBar,
  .progressSegment,
  .progressCenterLabel {
    transition: none;
  }
}