.stepper {
  display: flex;
  align-items: center;
}
.stepper.compact {
  align-items: center;
  gap: 8px;
}
.stepper.compact.compact-right {
  flex-direction: row-reverse;
  text-align: left;
}
.stepper.compact .stepper-wrapper {
  width: unset;
  flex-direction: column;
}
.stepper.vertical {
  height: 100%;
}
.stepper.vertical .stepper-wrapper {
  flex-direction: column;
  width: unset;
  height: 100%;
}

.stepper-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.stepper-wrapper ::slotted(*) {
  display: flex;
  flex: 1;
  justify-content: flex-start;
}

.stepper-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 0.875rem/1.25rem "Source Sans 3";
  font-family: var(--ifx-font-family);
  min-width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: conic-gradient(#0a8276 var(--pb, 0%), #bfbbbb 0);
}
.stepper-progress .progress-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: white;
}