html
  margin 0
  padding 0
  background #272a36

label
  cursor pointer
  input
    display none

svg
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  filter url("#gooey")

path
  fill none
  stroke-linecap round
  stroke #A06BA5
  stroke-width 3.5px
  transition all 1000ms cubic-bezier(0.5, -0.3, 0.5, 1.3), transform 750ms cubic-bezier(0.4, 0, 0.6, 1)

.top-left
.top-right
.bottom-left
.bottom-right
  stroke-dasharray 10px 65.43px
  stroke-dashoffset -49.43px
  transform translate(0px)

.middle
  stroke-dasharray 16px 132px
  stroke-dashoffset -48px
  transition all 750ms cubic-bezier(0.5, -1, 0.5, 2)

.top-left
  transform translate( 42px,  15px)
.top-right
  transform translate(-42px,  15px)
.bottom-left
  transform translate( 42px, -15px)
.bottom-right
  transform translate(-42px, -15px)

input:checked + svg
  .top-left
  .top-right
  .bottom-left
  .bottom-right
    stroke-dashoffset 0px
    stroke-dasharray 10px 65.43px
    transform translate(0)

  .middle
    stroke-dasharray 1px 132px
    stroke-dashoffset -55.5px

.debug 
  display none
  path
    stroke-dasharray none !important
    stroke #000 !important

.enable-debug
  .debug
    display inherit
  .icon
    transform translateX(0) !important
  svg
    filter none
