.cbx
  input#cbx(type='checkbox')
  label(for='cbx')
  svg(width='15' height='14' viewbox='0 0 15 14' fill='none')
    path(d='M2 8.36364L6.23077 12L13 2')
// Gooey
svg(xmlns='http://www.w3.org/2000/svg' version='1.1')
  defs
    filter#goo
      fegaussianblur(in='SourceGraphic' stddeviation='4' result='blur')
      fecolormatrix(in='blur' mode='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -7' result='goo')
      feblend(in='SourceGraphic' in2='goo')

$primary = #4C95F7
  
*
  box-sizing: border-box
  
input[type="checkbox"]
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none
  -webkit-tap-highlight-color: transparent
  cursor: pointer
  margin: 0
  &:focus
    outline: 0

.cbx
  position: absolute
  width: 24px
  height: 24px
  top: calc(50vh - 12px)
  left: calc(50vw - 12px)

  input
    position: absolute
    top: 0
    left: 0
    width: 24px
    height: 24px
    border: 2px solid #bfbfc0
    border-radius: 50%
    transition: all .2s ease
    &:hover
      border-color: darken(#bfbfc0,8%)
  
  label
    width: 24px
    height: 24px
    background: none
    border-radius: 50%
    position: absolute
    top: 0
    left: 0
    -webkit-filter: url(#goo)
    filter: url(#goo)
    transform: trasnlate3d(0,0,0)
    pointer-events: none
    
  svg
    position: absolute
    top: 5px
    left: 4px
    z-index: 1
    pointer-events: none
    path
      stroke: white
      stroke-width: 3
      stroke-linecap: round
      stroke-linejoin: round
      stroke-dasharray: 19
      stroke-dashoffset: 19
      transition: all .4s ease

  input:checked
    + label
      animation: splash .6s ease forwards
      + svg path
        stroke-dashoffset: 0
       
@keyframes splash
  0%
    transform: scale(1.1)
  40%
    transform: scale(1)
    background: $primary
    box-shadow: 0 -18px 0 -8px $primary, 16px -8px 0 -8px $primary, 16px 8px 0 -8px $primary, 0 18px 0 -8px $primary, -16px 8px 0 -8px $primary, -16px -8px 0 -8px $primary
  100%
    background: $primary
    box-shadow: 0 -32px 0 -10px transparent, 28px -16px 0 -10px transparent, 28px 16px 0 -10px transparent, 0 32px 0 -10px transparent, -28px 16px 0 -10px transparent, -28px -16px 0 -10px transparent