input#cbx.inp-cbx(type='checkbox', style='display: none')
label.cbx(for='cbx')
  span
    svg(width='12px', height='10px', viewbox='0 0 12 10')
      polyline(points='1.5 6 4.5 9 10.5 1')
  span CodePenChallenge

html, body
  height: 100%

body
  display: grid
  font-family: "Open Sans", sans-serif
  font-size: 16px
  color: #223254
  
.cbx
  margin: auto
  -webkit-user-select: none
  user-select: none
  cursor: pointer
  span
    display: inline-block
    vertical-align: middle
    transform: translate3d(0,0,0)
    &:first-child
      position: relative
      width: 18px
      height: 18px
      border-radius: 3px
      transform: scale(1)
      vertical-align: middle
      border: 1px solid #9098A9
      transition: all .2s ease
      svg
        position: absolute
        top: 3px
        left: 2px
        fill: none
        stroke: #FFFFFF
        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%
    &:last-child
      padding-left: 8px
  &:hover span:first-child
    border-color: #506EEC
 
.inp-cbx:checked + .cbx
  span
    &:first-child
      background: #506EEC
      border-color: #506EEC
      animation: wave .4s ease
      svg
        stroke-dashoffset: 0
      &:before
        transform: scale(3.5)
        opacity: 0
        transition: all .6s ease    
    
@keyframes wave
  50%
    transform: scale(.9)