.vl-step__icon {
  display: block;
  position: absolute;
  background-color: $vl-accent-color;
  font-size: inherit;
  font-weight: 700;
  color: $vl-text-color;
  line-height: $vl-step-icon-size;
  width: $vl-step-icon-size;
  height: $vl-step-icon-size;
  border-radius: 50%;
  text-align: center;
  top: 0;
  left: -$vl-step-icon-margin;

  .vl-badge {
    width: inherit;
    height: inherit;
    min-height: 2.6rem;
    border-radius: inherit;
    &__icon {
      font-size: 2rem;
      height: 2rem;
      color: inherit;
    }
  }

  .vl-step--highlighted & {
    background-color: $vl-action-secondary-color;
  }

  @include respond-to(small) {
    font-size: inherit;
    width: $vl-step-icon-size-small;
    height: $vl-step-icon-size-small;
    line-height: $vl-step-icon-size-small;
    top: 0.3rem;
    left: -$vl-step-icon-margin-small;

    .vl-badge {
      &__icon {
        font-size: 1.6rem;
        height: 1.6rem;
      }
    }
  }
}