// ---
// title: Steps
// description: A type of progress bar showing steps through a flow. Use with a width helper class if needed so that it fits cleanly.
// ---


// <div class="example html">
//   <ul class="lego-steps width-9-10">
//     <li class="lego-steps__item lego-steps__item--complete">
//       <div class="lego-steps__dot"></div>
//       <div class="lego-steps__label">Step One Label</div>
//     </li>
//     <li class="lego-steps__item lego-steps__item--complete">
//       <div class="lego-steps__dot"></div>
//       <div class="lego-steps__label">Step Two Label</div>
//     </li>
//     <li class="lego-steps__item lego-steps__item--active">
//       <div class="lego-steps__dot"></div>
//       <div class="lego-steps__label">Step Three Label</div>
//     </li>
//     <li class="lego-steps__item">
//       <div class="lego-steps__dot"></div>
//       <div class="lego-steps__label">Step Four Label</div>
//     </li>
//   </ul>
// </div>

// [---]

%#{$namespace}steps,
.#{$namespace}steps {
  @include display(flex);
  @include justify-content(center);
  margin-left: auto;
  margin-right: auto;

  &__dot {
    @include transform(translateX(-50%));
    @include transition(all map-fetch($transition-duration, base));
    position: absolute;
    width: 16px;
    height: 16px;
    top: -7px;
    left: 50%;
    border-radius: 50%;
    border: 3px solid map-fetch($color, ui base);
    background: map-fetch($color, ui white);
    z-index: 1;
  }

  &__label {
    text-align: center;
    font-weight: 400;
    color: map-fetch($color, text muted);
  }

  &__item {
    @include flex(1);
    padding-top: spacer(2);
    position: relative;

    &::before {
      content: '';
      height: 3px;
      background: map-fetch($color, ui base);
      width: 100%;
      position: absolute;
      top: 0;
      right: 50%;
    }

    &--active {
      &::before {
        background: map-fetch($color, ui brand);
      }

      .#{$namespace}steps__dot {
        background: map-fetch($color, ui brand);
        border-color: map-fetch($color, ui brand);
      }

      .#{$namespace}steps__label {
        color: map-fetch($color, text brand);
      }
    }

    &--complete {

      &::before {
        background: map-fetch($color, ui brand);
      }

      .#{$namespace}steps__dot {
        border-color: map-fetch($color, ui brand);
      }
    }

    // Prevents line showing up on step.
    &:first-child {
      &::before {
        display: none;
      }
    }
  }

}