.fizz-progress-list {
  counter-reset: step;
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: relative;
  background-color: $color-background-surface;
}

.fizz-progress-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $text-small-font-size;
  line-height: $text-small-line-height;
  width: 100%;
  color: $color-text-subdued;
  background-color: $color-background-surface;
  position: relative;
  z-index: 2;
}

.fizz-progress-list li:before {
  counter-increment: step;
  content: counter(step);
  display: none;
}

.fizz-progress-list li:after {
  content: "Step " attr(data-step);
  font-weight: $font-weight-regular;
  color: $color-text-subdued;
}

.fizz-progress-list a {
  color: inherit;
  display: block;
}

.fizz-progress-list a:hover {
  text-decoration: none;
  color: $color-text-link;
}

.fizz-progress-list li.fizz-is-active {
  color: $color-text-link;
  font-weight: $font-weight-semibold;
}

.fizz-progress-list li.fizz-is-active:before,
.fizz-progress-list li.fizz-is-complete:before {
  color: $color-text-inverse;
  background-color: $color-background-brand-secondary;
}

.fizz-progress-list li.fizz-is-complete:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 17.1l6.8 6.9L26 10.7 23.3 8 12.8 18.6l-4.2-4.2L6 17.1z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.fizz-progress-list li:not(.fizz-is-active) {
  display: none;
}

@media (min-width: 500px) {
  .fizz-progress-list {
    align-items: center;
  }
  .fizz-progress-list:before {
    display: block;
    content: "";
    border-bottom: 2px solid $color-border-default;
    height: 0;
    width: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  
  .fizz-progress-list li {
    width: auto;
    justify-content: flex-start;
    padding: 0 $spacing-8;
  }

  .fizz-progress-list li:first-of-type {
    padding-left: 0;
  }
  .fizz-progress-list li:last-of-type {
    padding-right: 0;
  }
  
  .fizz-progress-list li:before {
    display: inline-block;
    width: $spacing-24;
    height: $spacing-24;
    font-size: $text-small-font-size;
    line-height: $spacing-24;
    font-weight: $font-weight-semibold;
    text-align: center;
    background-color: $color-background-inactive;
    border-radius: 50%;
    margin-right: $spacing-8;
    flex-shrink: 0;
  }
  
  .fizz-progress-list li:not(.fizz-is-active) {
    display: flex;
  }
  .fizz-progress-list li:after {
    display: none;
  }
}

.fizz-progress-list-vertical {
  counter-reset: step;
  position: relative;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
}
.fizz-progress-list-vertical:before {
  content: "";
  display: block;
  width: 0;
  border-left: 2px solid $color-border-default;
  position: absolute;
  top: 0;
  bottom: 25%;
  left: 11px;
}
.fizz-progress-list-vertical li {
  counter-increment: step;
  padding-left: $spacing-32;
  position: relative;
}
.fizz-progress-list-vertical li > :first-child:before {
  content: counter(step);
  display: block;
  width: $spacing-24;
  height: $spacing-24;
  font-size: $text-small-font-size;
  line-height: $spacing-24;
  font-weight: $font-weight-semibold;
  text-align: center;
  background-color: $color-background-inactive;
  border-radius: 50%;
  margin-right: $spacing-8;
  flex-shrink: 0;
  position: absolute;
  top: -2px;
  left: 0;
  outline: $spacing-8 solid $color-background-surface;
}
.fizz-progress-list-vertical li.fizz-is-complete :first-child:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 17.1l6.8 6.9L26 10.7 23.3 8 12.8 18.6l-4.2-4.2L6 17.1z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  color: white;
  background-color: $color-background-brand-secondary;
}
.fizz-progress-list-vertical > :not(:last-child) {
  margin-bottom: $spacing-16;
}
.fizz-progress-list-vertical > * :not(:last-child) {
  margin-bottom: $spacing-4;
}
.fizz-progress-list-vertical > * > :first-child {
  color: $color-text-subdued;
  font-size: $text-small-font-size;
  line-height: $text-small-line-height;
}
.fizz-progress-list-vertical > .fizz-is-active :first-child:before {
  color: $color-text-inverse;
  background-color: $color-background-brand-secondary;
}
.fizz-progress-list-vertical > .fizz-is-active > :first-child {
  color: $color-text-link;
  font-weight: $font-weight-semibold;
}

@media (min-width: $breakpoint-m) {
  .fizz-progress-list-vertical > :not(:last-child) {
    margin-bottom: $spacing-24;
  }
  .fizz-progress-list-vertical > * {
    display: flex;
    align-items: baseline;
  }
  .fizz-progress-list-vertical > * > :first-child {
    flex-basis: var(--first-col, 175px);
  }
  .fizz-progress-list-vertical > * > :last-child {
    flex: 1;
    margin-left: $spacing-8;
  }
}