input#cbx.inp-cbx(type='checkbox' style='display: none;')
label.cbx(for='cbx')
  span
    svg(width='12px' height='9px' viewbox='0 0 12 9')
      polyline(points='1 5 4 8 11 1')
  span Reward yourself with a nap

$primary: #3c53c7
$gray:  #B9B8C3

body
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  font-family: "Open Sans", sans-serif
  font-size: 16px
  color: #00104B
  
.cbx
  -webkit-user-select: none
  user-select: none
  -webkit-tap-highlight-color: transparent
  cursor: pointer
  span
    display: inline-block
    vertical-align: middle
    transform: translate3d(0,0,0)
    &:first-child
      position: relative
      width: 24px
      height: 24px
      border-radius: 50%
      transform: scale(1)
      vertical-align: middle
      border: 1px solid $gray
      transition: all .2s ease
      svg
        position: absolute
        z-index: 1
        top: 8px
        left: 6px
        fill: none
        stroke: white
        stroke-width: 2
        stroke-linecap: round
        stroke-linejoin: round
        stroke-dasharray: 16px
        stroke-dashoffset: 16px
        transition: all .3s ease
        transition-delay: .1s
        transform: translate3d(0,0,0)
      &:before
        content: ""
        width: 100%
        height: 100%
        background: #506EEC
        display: block
        transform: scale(0)
        opacity: 1
        border-radius: 50%
        transition-delay: .2s
    &:last-child
      margin-left: 8px
      &:after
        content: ""
        position: absolute
        top: 8px
        left: 0
        height: 1px
        width: 100%
        background: $gray
        transform-origin: 0 0
        transform: scaleX(0)
  &:hover span:first-child
    border-color: $primary
 
.inp-cbx:checked + .cbx
  span
    &:first-child
      border-color: $primary
      background: $primary
      animation: check .6s ease
      svg
        stroke-dashoffset: 0
      &:before
        transform: scale(2.2)
        opacity: 0
        transition: all .6s ease
    &:last-child
      color: $gray
      transition: all .3s ease
      &:after
        transform: scaleX(1)
        transition: all .3s ease
    
@keyframes check
  50%
    transform: scale(1.2)