.ae-progress-indicator
  text-align: center
  margin: 1em 0

  &.ae-progress-check
    .ae-progress-points
      ol, li
        counter-increment: none

        &:before
          @include icon-font
          line-height: 1.6
          color: $primary-color
          content: ""

        &.ae-progress-point-done
          &:before
            content: "\f00c"
        &.ae-progress-point-current
          &:before
            content: "\f111"


  .ae-progress-point
    .ae-progress-heading
      max-width: 100px
      color: darken($gray-background, 15%)
      @include font-size(32px, 20px)

  .ae-progress-points
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    justify-content: center
    align-items: center
    align-content: stretch
    ol
      li
        counter-increment: item
        &:before
          content: counter(item)

    ol, ul
      display: flex
      flex-direction: row
      flex-wrap: nowrap
      justify-content: center
      align-items: flex-start
      align-content: stretch
      position: relative

      li
        list-style: none
        position: relative
        padding: 0em 1em

        &:first-child:after
          margin-left: 50%

        &:after
          border-top: 7px solid $gray-background
          position: absolute
          width: 100%
          content: ""
          left: 0
          z-index: 1
          top: 1.2rem
          margin-left: -50%

        &:before
          float: none
          display: block
          z-index: 2
          position: relative
          width: 3rem
          border: 2px solid $gray-background
          background: $gray-background
          @include border-radius(50px)
          margin: 0 auto
          text-align: center
          padding: 0
          height: 3rem
          @include font-size(32px, 24px)

          @include small-desktop
            font-size: 2rem
            line-height: 1.4 !important

        &.ae-progress-point-done
          .ae-progress-heading
            color: $body-color
          &:after
            border-top-color: $primary-color
          &:before
            border: 2px solid $primary-color

        &.ae-progress-point-current
          .ae-progress-heading
            color: $body-color
          &:after
            border-top-color: $primary-color
          &:before
            border: 2px solid $primary-color