.stepper {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
}

.stepper .step {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin-right: $spacer;
  user-select: none;
    
  .step-index {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    line-height: 1;
    font-size: $font-size-h6;
    color: $disabled;
    font-weight: $font-weight-normal;
    border-radius: 50%;
    border: $border-width solid $border-color;
    background-color: $white;
  }

  .step-title {
    margin-left: $spacing-xs;
    width: auto;
    font-size: $font-size-h5;
    font-weight: $font-weight-headings;
    color: $gray-dark;
  }
}

.stepper a.step {
  cursor: not-allowed;
}

.stepper a.step.current:hover,
.stepper a.step.completed:hover,
.stepper a.step.past:hover,
.stepper a.step.unlocked:hover,
.stepper a.step.failed:hover {
  cursor: pointer;
  .step-index {
    color: $white;
    background-color: $link-hover-color;
    border-color: $link-hover-color;
  }
  .step-index::before {
    background-color: $white;
  }
  .step-title {
    color: $link-hover-color;
  }
}

.stepper .step.completed {
  .step-index {
    color: transparent;
    font-size: 0;
    background-color: $gray-light;
    border-color: $gray-light;
  }
  .step-index::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: $white;
    mask-image: url("@images/check-thick.svg");
    mask-repeat: no-repeat;
  }
}

.stepper a.step.completed .step-index {
  background-color: $primary;
  border-color: $primary;
}

.stepper .step.past .step-index {
  color: $white;
  background-color: $gray-light;
  border-color: $gray-light;
}

.stepper a.step.past .step-index {
  background-color: $primary;
  color: $white;
  border-color: $primary;
}

.stepper .step.current {
   .step-index {
    color: $white;
    border-color: $info;
    background-color: $info;
  }
  .step-title {
    color: $black;
  }
}

.stepper .step.locked,
.stepper .step.locked:hover {
  .step-index {
    color: transparent;
    font-size: 0;
  }
  .step-index::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: $icon-sm;
    background-color: $disabled;
    mask-image: url("@images/lock.svg");
    mask-repeat: no-repeat;
  }
}

.stepper a.step.unlocked .step-index {
  color: $primary;
  border-color: $primary;
}

.stepper .step.failed {
  .step-index {
    color: transparent;
    font-size: 0;
    background-color: $danger;
    border-color: $danger;
  }
  .step-index::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: $white;
    mask-image: url("@images/cross-thick.svg");
    mask-repeat: no-repeat;
  }
}