.container {
  display: flex;
  flex-direction: column;
  gap: map.get($spacing-scale, 's-3');
  padding: map.get($spacing-scale, 's-3');
  background-color: var(--color-grey-light);
  border: 1px solid var(--color-grey-soft);
  border-radius: map.get($radius, 'md');
}

.header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.headerIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-secondary);

  svg {
    width: 100%;
    height: 100%;
  }
}

// Figma: Inter Medium 12px, lineHeight 100%
.headerText {
  @include metadata-medium;
  line-height: 1;
  color: var(--color-text-tertiary);
}

.stepsRow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stepGroup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
}

.step {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stepIndicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.emptyCircle {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--color-grey-neutral);
  border-radius: 50%;
}

.completedIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-semantic-success);
}

// Figma: Inter Regular 13px, lineHeight 100%
.stepLabel {
  @include caption-regular;
  line-height: 1;
  color: var(--color-text-primary);
  white-space: nowrap;
}

// Status-specific styles
.idle {
  .stepLabel {
    color: var(--color-text-tertiary);
  }
}

.active {
  .stepLabel {
    color: var(--color-text-primary);
    font-weight: map.get($font-weights, 'medium');
  }
}

.completed {
  .stepLabel {
    color: var(--color-text-primary);
  }
}