:host([active]) {
  --r-stepper-item--indicator--background-color: var(--r-background-inverse, #282828);
  --r-stepper-item--color: var(--r-text-inverse, #FFF);
  --r-stepper-item--text--color: var(--r-text-regular, #282828);
  --r-stepper-item--indicator--border-color: transparent;
}

:host([complete]) {
  --r-stepper-item--indicator--background-color: var(--r-status-success-regular, #298535);
  --r-stepper-item--color: var(--r-text-inverse, #FFF);
  --r-stepper-item--text--color: var(--r-text-regular, #282828);
  --r-stepper-item--indicator--border-color: transparent;
}

::slotted(.visually-hidden),
[data-visually-hidden-only=true],
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.r-stepper-item {
  display: var(--r-stepper-item--display, flex);
  flex-direction: var(--r-stepper-item--flex-direction, column);
  align-items: var(--r-stepper-item--align-items, center);
  justify-content: var(--r-stepper-item--justify-content, center);
  font-size: var(--r-stepper-item--font-size, var(--r-font-size-200, 0.8125rem));
  color: var(--r-stepper-item--color, var(--r-text-regular, #282828));
  font-family: var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));
  width: var(--r-stepper-item--width, var(--r-spacing-225, 2.25rem));
  white-space: var(--r-stepper-item--white-space, nowrap);
  gap: var(--r-stepper-item--gap, var(--r-spacing-100, 0.5rem));
}
.r-stepper-item--indicator {
  width: var(--r-stepper-item--indicator--width, var(--r-spacing-125, 1.25rem));
  height: var(--r-stepper-item--indicator--height, var(--r-spacing-125, 1.25rem));
  line-height: var(--r-stepper-item--indicator--line-height, var(--r-spacing-125, 1.25rem));
  border-radius: var(--r-stepper-item--indicator--border-radius, 50%);
  background-color: var(--r-stepper-item--indicator--background-color, transparent);
  display: var(--r-stepper-item--indicator--display, flex);
  justify-content: var(--r-stepper-item--indicator--justify-content, center);
  align-items: var(--r-stepper-item--indicator--align-items, center);
  border-width: var(--r-stepper-item--indicator--border-width, 1px);
  border-style: var(--r-stepper-item--indicator--border-style, solid);
  border-color: var(--r-stepper-item--indicator--border-color, var(--r-text-regular, #282828));
  margin-left: var(--r-stepper-item--indicator--margin-left, var(--r-spacing-100, 0.5rem));
  margin-right: var(--r-stepper-item--indicator--margin-right, var(--r-spacing-100, 0.5rem));
}
.r-stepper-item--indicator--step-number {
  vertical-align: var(--r-stepper-item--step-number--vertical-align, middle);
}
.r-stepper-item--text {
  font-size: var(--r-stepper-item--text--font-size, var(--r-font-size-200, 0.8125rem));
  color: var(--r-stepper-item--text--color, var(--r-text-regular, #282828));
  text-align: var(--r-stepper-item--text--text-align, center);
}