//
// Steps
// --------------------------------------------------


.steps {
  display: flex;
  flex-direction: column;
}

.step {
   position: relative;
   display: flex;
   align-items: center;
   padding: 1.5rem 0;
}
 .step:first-child {
   padding-top: 0 !important;
}
 .step:last-child {
   padding-bottom: 0 !important;
}
 .step::before, .step::after {
   position: absolute;
   // left: calc(7.625rem * .5);
   left: calc(5rem * .5);
   width: 1px;
   height: 50%;
   content: "";
}
 .step::before {
   top: 0;
}
 .step::after {
   top: 50%;
}
 .step:not(:first-child)::before {
   background-color: #e2e5f1;
}
 .step:not(:last-child)::after {
   background-color: #e2e5f1;
}

.step-number {
  position: relative;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 7.625rem;
  height: 7.625rem;
  border-radius: 50%;
  color: #0b0f19;
  background-color: #f3f6ff;
  font-size: 2rem;
  font-weight: 800;
}

.step-number  .step-number-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 50%;
    background-color: #fff;
    @include box-shadow(0 0.275rem 0.75rem -0.0625rem rgba(11, 15, 25, 0.06), 0 0.125rem 0.4rem -0.0625rem rgba(11, 15, 25, 0.03));
  }

.step-body {
  padding-left: 1.5rem;
}


// Small size

.steps-sm .step::before, .steps-sm .step::after {
   left: calc(5rem * .5);
}
 .steps-sm .step-number {
   width: 5rem;
   height: 5rem;
   font-size: 1.5rem;
}
 .steps-sm .step-number .step-number-inner {
   width: 3.5rem;
   height: 3.5rem;
}

  .steps:not(.steps-sm) .step {
   padding: calc(1.5rem * .625) 0;
}
 .steps:not(.steps-sm) .step::before, .steps:not(.steps-sm) .step::after {
   left: calc((7.625rem * .625) * .5);
}

  .step-number {
    font-size: calc(2rem * .625) !important; // stylelint-disable-line declaration-no-important
  }

  .steps:not(.steps-sm) .step-number {
    width: calc(7.625rem * .625);
    height: calc(7.625rem * .625);

    .step-number-inner {
      width: calc(5.625rem * .625);
      height: calc(5.625rem * .625);
    }
  }

  .step-body {
    padding-left: calc(1.5rem * .875);
  }
 


// Convert steps to horizontal layout on chosen breakpoint
// steps-horizontal-sm, steps-horizontal-md, steps-horizontal-lg,
// steps-horizontal-xl, steps-horizontal-xxl

.steps-horizontal {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-up($next) {

        &.steps {
          flex-direction: row;
          margin: {
            right: calc(1.5rem * -1);
            left: calc(1.5rem * -1);
          }
        }

        .step {
          display: block;
          flex-basis: 0;
          flex-grow: 1;
          padding: 0 1.5rem;

          &::before,
          &::after {
            top: calc(7.625rem * .5);
            height: 1px;
          }

          &::before {
            left: 0;
            display: none;
          }
          &::after {
            left: 1.5rem;
            width: 100%;
          }
        }

        &.steps-sm .step::before,
        &.steps-sm .step::after {
          top: calc(5rem * .5);
        }

        .step-number {
          margin-bottom: 1.5rem;
        }

        .step-body {
          padding-left: 0;
        }

        &.steps-center {
          text-align: center;

          .step {
            &::after {
              left: 50%;
              width: 50%;
            }
            &:not(:first-child)::before {
              display: block;
              width: 50%;
            }
          }

          .step-number {
            margin: {
              right: auto;
              left: auto;
            }
          }
        }

        &.steps-end {
          text-align: right;

          .step {
            &:not(:first-child)::before {
              display: block;
              width: calc(100% - 1.5rem);
            }
            &::after {
              right: 0;
              left: auto;
              width: 1.5rem;
            }
            &:last-child::after {
              display: none;
            }
          }

          .step-number {
            margin-left: auto;
          }
        }
      }
    }
  }
}