.stepper {
  display: flex;
  flex-direction: column;
}

.stepper .stepper__step {
  text-decoration: none;
  display: flex;
  gap: var(--wp--preset--spacing--lg);
}
.stepper
  .stepper__step.current-step.completed-step
  .step__connector-wrap
  .connector-wrap__line {
  background-color: var(--wp--preset--color--border-secondary);
}

.stepper .stepper__step .step__title {
  font-size: var(--wp--preset--font-size--text-sm);
  font-weight: 600;
  color: var(--wp--preset--color--contrast-secondary);
  margin-block-start: 0;
  margin-block-end: 0;
}
.stepper .stepper__step .step__title:hover {
  color: var(--wp--preset--color--accent);
  transition: all 0.1s ease-in-out;
}
.stepper .stepper__step.current-step .step__title {
  color: var(--wp--preset--color--accent);
}

.stepper .stepper__step .step__connector-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.stepper
  .stepper__step.completed-step
  .step__connector-wrap
  .connector-wrap__base,
.stepper
  .stepper__step.completed-step
  .step__connector-wrap
  .connector-wrap__line,
.stepper
  .stepper__step.current-step
  .step__connector-wrap
  .connector-wrap__base {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--accent);
}
.stepper
  .stepper__step.current-step
  .step__connector-wrap
  .connector-wrap__base {
  outline-width: 4px;
}
.stepper .stepper__step .step__connector-wrap .connector-wrap__base {
  font-size: var(--wp--preset--font-size--text-sm);
  font-weight: 600;
  background-color: var(--wp--preset--color--gray-50);
  color: var(--wp--preset--color--gray-300);
  border-color: var(--wp--preset--color--border-secondary);
  border-width: 0.09375rem;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  outline-width: 0px;
  outline-style: solid;
  outline-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 20%,
    transparent
  );
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  -ms-border-radius: 9999px;
  -o-border-radius: 9999px;
  transition: all 0.1s ease-in-out;
}

.stepper .stepper__step .step__connector-wrap .connector-wrap__line {
  margin-block-start: var(--wp--preset--spacing--xs);
  margin-block-end: var(--wp--preset--spacing--xs);
  background-color: var(--wp--preset--color--border-secondary);
  min-block-size: 0.875rem; /* 14px */
  inline-size: 0.125rem; /* 2px */
  border-radius: 0.125rem; /* 2px */
  -webkit-border-radius: 0.125rem;
  -moz-border-radius: 0.125rem;
  -ms-border-radius: 0.125rem;
  -o-border-radius: 0.125rem;
  transition: all 0.1s ease-in-out;
}