ministryofjustice/civil-claims-frontend-claimant

@import "css3"
@import "colours"

nav.progress
  width: 100%
  max-width: 960px
  margin-bottom: 50px
  
  ol
    list-style-type: none
    padding: 0
    margin: 0
    counter-reset: pos
    border:
      top: 1px solid $grey-2
      bottom: 1px solid $grey-2
    background-color: $grey-4
    height: 53px
    overflow: hidden
    display: table
    width: 100%

  li
    display: table-cell
    font-size: 19px
    margin: 0
    height: 53px
    overflow: hidden
    text-align: center

    a
      text-decoration: underline
      display: block

      &:hover
        text-decoration: none

    &:first-child
      span, a
        padding-left: 20px

      &.active
        background: image-url('progress-chevrons.png') right top no-repeat, $light-blue
        span, a
          padding-left: 20px

    &:last-child
      &.active
        background: image-url('progress-chevrons.png') no-repeat left bottom, $light-blue
        span, a
          padding-right: 0

    span, a
      color: $grey-1
      display: inline-block
      padding: 10px
      

      &:before
        counter-increment: pos
        content: counter(pos)
        display: inline-block
        width: 32px
        height: 32px
        text-align: center
        margin-left: 0
        margin-right: 7px
        @include border-radius(16px)
        background-color: $grey-3
        font-size: 24px
        font-weight: bold

    &.active
      background: $light-blue image-url('progress-chevrons.png') right top no-repeat

      background: image-url('progress-chevrons.png') right top no-repeat, image-url('progress-chevrons.png') no-repeat left bottom, $light-blue

      padding-right: 10px

      span, a
        color: $white

        padding-left: 25px


        &:before
          background-color: $white
          color: $light-blue

    &.completed
      span, a
        color: $turquoise

        &:before
          background-color: $turquoise
          color: $white
          content: image-url('progress-tick.png')