.stepped {
  $stepped-border-width:                                    1px !default;
  $stepped-border-color:                                    rgba(0,0,0, 0.4) !default;
  $stepped-border-solid:                                    solid !default;
  $stepped-border-dashed:                                   dashed !default;
  $stepped-indicator-color:                                 $primary !default;
  $stepped-indicator-active-color:                          $primary !default;
  $stepped-indicator-old-color:                             $gray-700 !default;
  $stepped-indicator-new-color:                             $success !default;

  display:                                                  flex;
  flex-direction:                                           row;

  .step {
    $this:                                                  &;
    flex:                                                   1;
    margin-right:                                           -2px;
    position:                                               relative;

    .step-separator {
      z-index:                                              1;
      position:                                             relative;
      > * {
        display: block !important;
      }
      &:before {
        content:                                            '';
        border-bottom:                                      $stepped-border-dashed $stepped-border-width $stepped-border-color;
        width:                                              100%;
        height:                                             1px;
        display:                                            block;
        top:                                                calc(50% - #{$stepped-border-width});
        position:                                           absolute;
        z-index:                                            -1;
      }
      .step-indicator {
        background:                                         $stepped-indicator-color;

        &:not(.has-value){
          width:                                            15px;
          height:                                           15px;
          border-radius:                                    15px;
        }

        .selectable {
          background:                                       inherit;
        }

        &.has-value {
          display:                                          inline-block;
          width:                                            auto;
          height:                                           auto;
        }

        @at-root #{$this}.active {
          .step-indicator {
            background:                                     $stepped-indicator-active-color !important;
          }
        }

        @at-root #{$this}.old {
          .step-indicator {
            background:                                     $stepped-indicator-old-color !important;
          }
        }

        @at-root #{$this}.new {
          .step-indicator {
            background:                                     $stepped-indicator-new-color !important;
          }
        }
      }
      .step-progress {
        .progress-bar {
          display: block;
          min-height: 2px;
          position: absolute;
          border-radius: 7px;
          top: 50%;
          margin-top: -2px;
          z-index: -1;
          &.progress-bar-previous {
            display: none;
          }
        }
      }
    }
    dense {
      font-size: 10px !important;
    }
  }
  /** Centerd State */
  &.centered {
    .step {
      text-align:                                           center;
      @each $class in ('first-child', 'last-child') {
        &:#{$class} {
          .step-separator:before {
            width:                                          50%;

            @if $class == 'first-child' {
              margin-left:                                  50%;
            }
          }
        }
      }
      .step-progress {
        .progress-bar {
          margin-left: 50%;

          &.progress-bar-previous {
            display: block;
            margin-left: 0px;
          }
        }
      }
      .step-separator {
        > * {
          margin:                                           auto;
        }
      }
    }
  }
  /** Centerd-full State */
  &.centered-full {
    .step {
      text-align:                                           center;
      .step-separator {
        > * {
          margin:                                           auto;
        }
      }
    }
  }
  &.solid {
    .step {
      text-align:                                           center;
      margin-right:                                         0;
      .step-separator {
        &:before {
          border-bottom:                                    $stepped-border-solid $stepped-border-width $stepped-border-color;
        }
      }
    }
  }

  @include                                                  media-breakpoint-down(lg){
    overflow-x: auto;
  }
}

.transparent-stepped {
  .stepped .step .step-separator .step-indicator {
    background: transparent;
  }
}
