$vl-step-icon-margin: 8rem;
$vl-step-icon-margin-small: 5rem;
$vl-step-icon-size: 5rem;
$vl-step-icon-size-small: 3.5rem;
$vl-step-line-margin: 1.5rem;
$vl-step-margin-top: 2.5rem;
$vl-step-margin-top-small: 2rem;
$vl-icon-line-height: 1.5rem;
$vl-timeline-icon-size: 4 * $vl-icon-line-height;
$vl-timeline-icon-size-small: 2 * $vl-icon-line-height + 1rem;

// Steps
.vl-steps {
  position: relative;
  margin-bottom: $vl-spacing-medium;

  // Steps has line modifier
  &--has-line {
    .vl-step {
      &::before {
        position: absolute;
        display: block;
        background-color: $vl-alt-bg;
        content: "";
        width: 0.3rem;
        top: $vl-step-icon-size + $vl-step-line-margin - 0.5rem;
        bottom: -0.5rem;
        left: -($vl-step-icon-margin - $vl-step-icon-size / 2 + 0.1rem);

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

      + .vl-step {
        margin-top: 1.5rem;
      }
    }
  }
}

// Step
.vl-step {
  position: relative;
  border: 0.1rem solid $vl-border-color;
  padding: 1.5rem;
  margin-left: 8rem;

  @include respond-to(small) {
    padding: 1rem;
    margin-left: 5rem;

    + .vl-step {
      margin-top: $vl-step-margin-top-small;
    }
  }

  + .vl-step {
    margin-top: $vl-step-margin-top;
  }

  // Step has link modifier
  &--has-link {
    padding: 0;

    @include respond-to(small) {
      padding: 0;
    }

    // Step link
    .vl-step__link {
      display: block;
      color: $vl-text-color;
      text-decoration: none;
      transition: background-color 0.2s;
      padding: 1.5rem;

      &:hover,
      &:focus {
        background-color: $vl-alt-hover-bg;

        .vl-step__wrapper {
          &::after {
            border-right-color: $vl-alt-hover-bg;
          }
        }
      }

      // Step title
      .vl-step__title {
        color: $vl-action-text-color;
      }

      @include respond-to(small) {
        padding: 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");
    }
  }

  // Step content
  &__content {
    font-size: 1.6rem;

    @include respond-to(small) {
      font-size: $vl-base-mobile-font-size;
    }

    p + p {
      margin-top: 1rem;
    }

    .vl-step__header ~ .vl-step__content-wrapper & {
      margin-top: 1.5rem;
    }
  }

  // Step wrapper
  &__wrapper {
    position: relative;

    &::before,
    &::after {
      position: absolute;
      display: block;
      content: "";
      border-width: 1rem;
      border-style: solid;
      top: 0;
      left: -3.5rem;

      @include respond-to(small) {
        left: -3.1rem;
      }
    }

    &::after {
      border-color: transparent;
      border-right-color: $vl-page-bg;
      transition: border-right-color 0.2s;
      left: -3.4rem;

      @include respond-to(small) {
        left: -3rem;
      }

      .vl-step--disabled & {
        border-right-color: $vl-disabled-bg-color;
      }

      .vl-step--success & {
        border-right-color: $vl-success-secondary-color;
      }

      .vl-step--warning & {
        border-right-color: $vl-warning-secondary-color;
      }

      .vl-step--error & {
        border-right-color: $vl-error-secondary-color;
      }
    }

    &::before {
      border-color: transparent;
      border-right-color: $vl-border-color;
    }
  }

  // Step title
  &__title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.35;

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

    // Step title annotation
    &__annotation {
      font-family: $vl-base-font;
      font-size: 1.4rem;
      font-weight: 400;

      &::before {
        content: "-";
        margin: 0 0.5rem;
      }
    }

    .vl-step--disabled & {
      color: $vl-disabled-text-color;
    }

    .vl-step--accordion & {
      color: $vl-action-text-color;
    }
  }

  // Step subtitle
  &__subtitle {
    font-family: $vl-base-font;
    font-size: 1.4rem;
    color: $vl-text-color;
    line-height: 1.2;
    margin: 0;
  }

  // Step accordion toggle
  &__accordion-toggle {
    @include vi;
    @include vi-u-s;
    @include vi-arrow;
    @include vi-u-90deg;

    &::before {
      transition: transform 0.2s;
    }

    .js-vl-accordion--open {
      &::before {
        transform: rotate(-90deg);
      }
    }
  }
}

// Imports
@import "steps-timeline";
@import "duration-step";
@import "step-header";
@import "step-icon";