=icon-sprite-return-guide($position, $width: auto, $height: auto)
  background: url('/images/structure/return-guide-sprite.svg') $position no-repeat
  background-size: 170px 50px
  width: $width
  height: $height

.return-guide
  .guide-steps
    background-color: white
    border-radius: 4px
    width: 100%
    margin-bottom: 40px

    h2
      margin-top: 0
      font-size: 24px
      line-height: 28px
      +regular

      strong
        +bold

    .intro
      margin-bottom: 40px
      p
        max-width: 575px

    .steps
      margin-bottom: 60px
      ol
        counter-reset: returnSteps
        font-size: 1.5em
        list-style: none

        li
          position: relative
          padding-left: 60px
          max-width: 510px

          + li
            margin-top: 30px

          &:before
            position: absolute
            top: 0
            left: 0
            +flex(center, center)
            width: 20px
            height: 100%
            text-align: center
            font-size: 24px
            color: $blue
            counter-increment: returnSteps
            content: counter(returnSteps)"."

        +media-query(450px)
          padding-left: 0
          li
            padding-left: 40px

    .steps-circles
      +flex(flex-start, flex-start)
      margin-bottom: 40px

      .step
        display: inline-block
        width: 200px
        text-align: center

      .arrow-placeholder
        height: 100px
        width: 65px
        +flex(center, center)

        .arrow
          display: inline-block
          vertical-align: middle
          +icon-sprite-return-guide(-52px -39px, 13px, 10px)

      .circle
        +flex(center, center)
        width: 100px
        height: 100px
        margin: auto
        border-radius: 100%
        border: 2px solid $blue

        span
          display: inline-block
          &.print
            +icon-sprite-return-guide(0 0, 50px, 45px)
          &.box
            +icon-sprite-return-guide(-52px 0, 58px, 37px)
          &.dpd
            +icon-sprite-return-guide(-112px 0, 57px, 36px)

      p
        max-width: 185px
        margin: 10px auto 0
        font-size: 14px

      +media-query(425px)
        display: block
        margin-bottom: 0

        .arrow-placeholder
          display: none

        .step
          width: 100%
          margin-bottom: 40px


    .return-cta
      h3
        margin-top: 0
        +bold
        font-size: 14px
        line-height: 17px

      .return-cta-button
        position: relative
        display: block
        background-color: $blue
        border-radius: 8px
        padding: 12px 20px
        color: white
        +semibold
        font-size: 15px
        line-height: 15px
        text-decoration: none

        &:before
          content: '›'
          +semibold
          color: white
          font-size: 28px
          line-height: 40px
          position: absolute
          right: 20px
          top: -3px