//iOS Safari Download Button

a.btn(href='#')
  span.circle
  svg(width='20' height='26' viewbox='0 0 20 26')
    path(d='M1.5 16.5L10 24.5L18.5 16.5')
    path(d='M10 1.5V24')
  span.progress

$primary: #ff9b8b
$secondary: #fdd7d2

body
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  background: #4e295b

*
  box-sizing: border-box

.btn
  position: relative
  display: inline-block
  width: 48px
  height: 48px
  border-radius: 24px
  svg
    fill: none
    width: 20px
    height: 26px
    margin: 11px 0 0 14px
    transform: translate3d(0,0,0)
    path
      stroke: $secondary
      stroke-width: 3
      stroke-linecap: round
      stroke-linejoin: round
      transition: stroke .3s ease

  .circle
    position: absolute
    display: block
    top: 0
    left: 0
    height: 48px
    width: 48px
    border-radius: 24px
    border: 3px solid $secondary
    transition: border .3s ease

  .progress
    position: absolute
    display: block
    bottom: -10px
    left: 0
    height: 3px
    width: 48px
    border-radius: 3px
    background: rgba($secondary,.2)
    opacity: 0
    pointer-events: none
    overflow: hidden
    &:after
      content: ''
      display: block
      width: 100%
      height: 3px
      border-radius: 2px
      background: $primary
      transform-origin: left
      transform: scaleX(0)
      transition: transform 2s linear
    
    &.active
      opacity: 1
      &::after
        transform: scaleX(1)

  &:hover
    .circle
      border-color: $primary
    
    svg
      path
        stroke: $primary
  &:active
    svg
      transform: translateY(2px)
  
  &.pending
    .circle
      border-color: $primary
      animation: animC .6s ease-out
      animation-delay: 2.35s

    svg
      animation: animS .6s ease-in
      animation-delay: 2.15s
      path
        stroke: $primary

@keyframes animS
    5%
      transform: scale(.9)
    50%
      transform: translateY(12px)
    80%
      transform: translateY(-4px)

@keyframes animC
    50%
      transform: translateY(6px)
    80%
      transform: translateY(-4px)

$('.btn').click ->
  $('.btn').addClass 'pending'
  $('.progress').addClass 'active'
  setTimeout (->
    $('.progress').removeClass 'active'
  ), 2300
  setTimeout (->
    $('.btn').removeClass 'pending'
  ), 3600