.wizard-steps {
  margin-top: $spacing-sm;
}

.wizard-steps li {
  display: inline-block;
  margin-right: $spacing-sm;
  &.connected-steps:not(:last-child):after {
    z-index: -1;
    content: '';
    display: block;
    position: relative;
    top: -30px;
    left: 33px;
    width: 20px;
    border-bottom: 1px solid $border-color;
  }

  .headline-wrapper {
    margin: 0;
  }

  .step-index {
    z-index: 1;
    background-color: $nav-wizard-step-bg;
    display: inline-block;
    margin-right: $nav-wizard-step-margin-right;
    height: $nav-wizard-step-index-size;
    width: $nav-wizard-step-index-size;
    padding-top: calc($spacing-icon-x / 2);
    text-align: center;
    font-size: $nav-wizard-step-font-size;
    color: $nav-wizard-step-color;
    border: $border-width solid $nav-wizard-step-border;
    border-radius: 50%;
  }

  .headline {
    display: inline-block;
    margin: 0;
    color: $gray-light;
  }

  a {
    @include hover-focus {
      color: $link-hover-color;
    }
  }
}

.wizard-steps li.finished {
  .step-index {
    color: $nav-wizard-finished-step-color;
    background-color: $nav-wizard-finished-step-bg;
    border-color: $nav-wizard-finished-step-border;
  }
}

.wizard-steps li.active {
  .step-index {
    position: relative;
    color: transparent;
    @include io-icomoon("check");

    &:before {
      display: block;
      position: absolute;
      top: 8px;
      left: 12px;
      height: $font-size-icon;
      font-size: $font-size-icon;
      color: $gray-light;
    }
  }

  a {
    .step-index {
      color: $nav-wizard-active-step-color;
      background-color: $nav-wizard-active-step-bg;
      border-color: $nav-wizard-active-step-border;
      &:before {
        content: "";
      }
    }

    @include hover-focus {
      color: $link-hover-color;
      .step-index {
        background-color: $link-hover-color;
        border-color: $link-hover-color;
      }
      .headline {
        color: $link-hover-color;
      }
    }
  }
}

.wizard-steps li.active.current {
  .step-index {
    color: $white;
    background-color: $petrol;
    border-color: $petrol;
    &:before {
      content: "";
    }
  }
  .headline {
    color: $petrol;
  }
}