.cart-upgrade-steps {
  position: relative;
  min-height: 115px;
  .stepped {
    transition: transform 2s ease-in-out;
    .progress-bar {
      //@include                                          transition(width .5s linear);
      $transition: width .5s linear;
      -webkit-transition: $transition;
      -moz-transition: $transition;
      -o-transition: $transition;
      transition: $transition;
    }
    &.decreasing {
      .progress-bar {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
      }
    }
  }
  .step {
    flex: 1;
    $delay: 0;
    $speed: 0.5;
    @for $i from 1 through 10 {
      @if $i % 2 != 0 {
        $delay: $delay + 0.4;
      } @else {
        $delay: $delay + ($i * 0.05);
      }
      $delay: $delay + $speed + ($i * 0.02);
      &:nth-child(#{$i}) {
        .step-progress {
          .progress-bar {
            transition-delay:                             #{(($delay)) * $speed}s;
          }
        }
      }
    }
    &.hide-before-line, &.hide-after-line {
      .step-separator {
        &:before {
          content: '';
          width: 0px !important;
        }
      }
    }
    &.half-before-line {
      .step-separator {
        &:before {
          width: 50%;
          margin-left: 50%;
        }
      }
    }
    &.half-after-line {
      .step-separator {
        &:before {
          width: 50%;
        }
      }
    }
    &.hide-progress {
      .progress-bar-previous {
        display: none !important;
      }
    }
    &.hide-progress-next {
      .progress-bar {
        display: none !important;
      }
    }
    &.pointer {
      &:before {
        content: '';
        display: inline-block;
        width: 0px;
        height: 0px;
        position: absolute;
        left: 50%;
        margin-left: -7px;
        top: -10px;
        border-top: 6px solid var(--primary);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid transparent;
      }
    }
    .text-area {
      .fadeAnimation {
        opacity: 0;
        $transition: opacity .5s linear;
        -webkit-transition: $transition;
        -moz-transition: $transition;
        -o-transition: $transition;
        transition: $transition;
        &.show {
          opacity: 1;
          $transition: opacity .5s linear;
          -webkit-transition: $transition;
          -moz-transition: $transition;
          -o-transition: $transition;
          transition: $transition;
        }
      }
    }
  }
}