.vl-steps--timeline {
  // Step
  .vl-step {
    &::before {
      position: absolute;
      display: block;
      background-color: $vl-alt-bg;
      content: "";
      width: 0.3rem;
      top: $vl-timeline-icon-size + 0.4rem;
      bottom: #{-$vl-step-margin-top + 0.4rem};
      left: -($vl-step-icon-margin - $vl-step-icon-size / 2 + 0.1rem);

      @include respond-to(small) {
        top: $vl-timeline-icon-size-small + 0.4rem;
        bottom: #{-$vl-step-margin-top-small + 0.4rem};
        left: -($vl-step-icon-margin-small - $vl-step-icon-size-small / 2 + 0.1rem);
      }
    }

      // Step disabled modifier
    &--disabled {
      background-color: $vl-disabled-bg-color;

      .vl-step__icon {
        background-color: $vl-disabled-color;
      }
    }

    // Step accordion modifier
    &--accordion {
      .vl-step__content-wrapper {
        visibility: hidden;
        overflow: hidden;
        max-height: 0;
      }

      &.js-vl-accordion--open {
        .vl-step__content-wrapper {
          visibility: visible;
          max-height: 100%;
        }
      }

      .vl-step__icon {
        @include vi-u-badge--color("action");
      }
    }

    // Step success modifier
    &--success {
      background-color: $vl-success-secondary-color;

      .vl-step__icon {
        @include vi-u-badge--color("positive");
      }
    }

    // Step warning modifier
    &--warning {
      background-color: $vl-warning-secondary-color;

      .vl-step__icon {
        @include vi-u-badge--color("warning");
      }
    }

    // Step error modifier
    &--error {
      background-color: $vl-error-secondary-color;

      .vl-step__icon {
        @include vi-u-badge--color("negative");
      }
    }

    &:last-child {
      &::before {
        display: none;
      }
    }

    // Step icon
    &__icon {
      background-color: $vl-accent-color;
      font-size: 1.8rem;
      color: $vl-text-color;
      height: auto;
      line-height: $vl-icon-line-height;
      border-radius: 0;
      padding: $vl-icon-line-height 0;
      top: 0;

      @include respond-to(small) {
        font-size: 1.5rem;
        padding: 0.5rem 0;
      }

      // Step icon sub
      &__sub {
        display: block;
        font-size: 1.4rem;
        font-weight: 300;

        @include respond-to(small) {
          font-size: 1.3rem;
        }
      }
    }
  }
}