.step {
  position: relative;

  &::before {
    content: ' ';

    position: absolute;
    display: block;
    z-index: $z-index-progress-step;

    height: 5px;
    width: 100%;

    background-color: $color-gray--mid;

    @include media-breakpoint-up(md) {
      height: 8px;
    }
  }

  &::before {
    left: -50%;
    top: 9px;

    @include media-breakpoint-up(md) {
      top: 16px;
    }
  }
}

.step.is-active::before,
.step.is-active .step__bullet {
  background-color: $color-light-blue;
}

.step--clickable.is-active .step__bullet:hover {
  background-color: $color-blue;
  color: $color-white;
  cursor: pointer;
}

.step--clickable.is-current .step__bullet:hover {
  background-color: $color-light-blue;
  cursor: default;
}

.step--start::before {
  display: none;
}

.step--end {
}

.step__bullet__checkmark {
  width: 19px;
  height: 16px;
  position: relative;
  margin-left: 4px;
  fill: $color-gray--dark;

  @include media-breakpoint-up(md) {
    width: 38px;
    height: 32px;
    margin-left: 8px;
  }

  &.is-active {
    fill: $color-green;
  }
}

.step__bullet {
  display: block;
  position: relative;
  left: -11.5px;
  z-index: $z-index-progress-step-bullet;

  height: 23px;
  width: 23px;
  margin-left: 50%;

  text-align: center;
  line-height: 23px;
  font-size: 13px;

  border-radius: 50%;
  background-color: $color-gray--mid;
  color: $color-white;

  @include media-breakpoint-up(md) {
    left: -20px;

    height: 40px;
    width: 40px;

    line-height: 40px;
    font-size: 26px;
  }
}

.step__caption {
  display: block;

  text-align: center;
  color: $color-gray--darkest;
}

// Copyright AXA Versicherungen AG 2015