/* ==========================================================================

Steps Progress.scss
========================================================================== */

// the progress bar element shows a user where they are in a series of // transactional steps. an example would be when registering for an event, // the user will need to login, answer questions, provide payment, then complete

// container .progress-bar-block {

margin: -2rem -2rem 3rem;

}

// progress items container, on a ul .progress-bar {

display: flex;
list-style: none;
margin: 0;
padding: 0;
width: 100%;

// progress items, on a li
.progress-point {
  color: rgba($black, .3);
  text-align: center;
  padding: 1rem 0;
  display: inline-block;
  flex-grow: 1;
  border-top: 2px solid $green; // by default we show the active bar color
  position: relative;

  @media (max-width: $medium-breakpoint) {
    text-indent: -9999px;
    padding: 0;
    height: 0;
  }

  // circle element
  &:after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    background-color: $green; // by default we show the active bar color
    border-radius: $global-rounded;

    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
  }

  // the activated step
  &.active {
    color: rgba($black, .7);

    // targets all progress points after the .active point
    // all items after .active are show in gray
    ~ .progress-point {
      border-color: $gray-1;

      &:after {
        background-color: $gray-1;
      }
    }
  }
}

}