input#morning.inp-cbx(type='checkbox')
label.cbx(for='morning')
  span
    svg(width='12px',height='10px')
      use(xlink:href='#check')
  span Morning
input#noon.inp-cbx(type='checkbox')
label.cbx(for='noon')
  span
    svg(width='12px',height='10px')
      use(xlink:href='#check')
  span Noon
input#afternoon.inp-cbx(type='checkbox')
label.cbx(for='afternoon')
  span
    svg(width='12px',height='10px')
      use(xlink:href='#check')
  span Afternoon
input#evening.inp-cbx(type='checkbox', style='display: none')
label.cbx(for='evening')
  span
    svg(width='12px',height='10px')
      use(xlink:href='#check')
  span Evening
  
//SVG Sprites
svg.inline-svg
  symbol#check(viewbox='0 0 12 10')
    polyline(points='1.5 6 4.5 9 10.5 1')

$primary = #0077FF

*
  box-sizing: border-box

.cbx
  -webkit-user-select: none
  user-select: none
  cursor: pointer
  padding: 6px 8px
  border-radius: 6px
  overflow: hidden
  transition: all .2s ease
  &:not(:last-child)
    margin-right: 6px
  &:hover
    background: rgba($primary,.06)
  span
    float: left
    vertical-align: middle
    transform: translate3d(0,0,0)
    &:first-child
      position: relative
      width: 18px
      height: 18px
      border-radius: 4px
      transform: scale(1)
      border: 1px solid #CCCFDB
      transition: all .2s ease
      box-shadow: 0 1px 1px rgba(#00104B,.05)
      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)
    &:last-child
      padding-left: 8px
      line-height: 18px
  &:hover span:first-child
    border-color: $primary
    
.inp-cbx
  position: absolute
  visibility: hidden
 
.inp-cbx:checked + .cbx
  span
    &:first-child
      background: $primary
      border-color: $primary
      animation: wave .4s ease
      svg
        stroke-dashoffset: 0   
    
@keyframes wave
  50%
    transform: scale(.9)

body
  font-family: "Open Sans", sans-serif
  font-size: 16px
  -webkit-font-smoothing: antialiased
  text-rendering: optimizelegibility
  color: #223254
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  
.inline-svg
  position: absolute
  width: 0
  height: 0
  pointer-events: none
  user-select: none
  
@media screen and (max-width: 640px)
  body
    width: auto
    display: inherit
    padding: 20px
  .cbx
    width: 100%
    margin-bottom: 4px
    display: inline-block