// Checkout Steps
// ==========================================================================

$checkout-green: #9ddb72
$checkout-step-border: rgba(214,207,201,.5)

.top-bar.checkout-steps
  padding-left: 0

.checkout-steps
  font-size: 1.5em // 15px

  .step
    position: relative
    float: left
    +grid-padding-s($right: .5, $left: .5)
    +grid-margin-s($left: .5)

    // Triangle
    &::after
      display: block
      z-index: 5
      +position(absolute, 0 null null -16px)
      +triangle(40px 16px, #fff, right)
      content: ''

      +respond-to(medium)
        left: -20px
        +triangle(48px 20px, #fff, right)
      +respond-to(large)
        +triangle(56px 20px, #fff, right)

    // Triangle border
    &::before
      display: block
      +position(absolute, 0 null null -14px)
      +triangle(40px 16px, $checkout-step-border, right)
      content: ''

      +respond-to(medium)
        left: -14px
        +triangle(48px 20px, $checkout-step-border, right)
      +respond-to(large)
        +triangle(56px 20px, $checkout-step-border, right)

    // Step classes
    &.title // No triangle, no border
      margin-left: 0
      background: $checkout-green
      color: #fff
      &::after
        display: none
      &::before
        display: none

    &.active
      color: $blue

    &.valid
      color: #fff
      background: $checkout-green
      margin-left: 0
      +grid-padding-s($left: 1)

      &::after
        left: 0
      &::before
        left: 2px

    &.active, &.valid // Green triangle, white border

      &::after
        +triangle(40px 16px, $checkout-green, right)

        +respond-to(medium)
          +triangle(48px 20px, $checkout-green, right) 
        +respond-to(large)
          +triangle(56px 20px, $checkout-green, right)

      &::before
        +triangle(40px 16px, rgba(255,255,255,.5), right)

        +respond-to(medium)
          +triangle(48px 20px, rgba(255,255,255,.5), right)
        +respond-to(large)
          +triangle(56px 20px, rgba(255,255,255,.5), right)




    &.disabled
      color: #d6cfc9