.cmi-checkbox-container

position: relative
z-index: 0
display: block
margin: 0.875rem 0
font-size: 14px
font-size: 0.875rem
+backface-visibility(hidden)
.cmi-label
  position: relative
  display: inline-block
  max-width: 100%
  min-height: 20px
  margin-bottom: 0
  padding-left: 10px
  font-size: 1em
  color: $checkbox-color-label
  cursor: pointer
  vertical-align: top
  +user-select(none)
.cmi-input[type="checkbox"]
  position: absolute
  opacity: 0
  visibility: hidden
  margin-left: -9999px
.cmi-span
  left: 0px
  +transition-duration(0.2s)
.cmi-span.cmi-animation
  position: absolute
  display: block
  overflow: hidden
  z-index: 0
  height: 36px
  width: 36px
  top: -5px
  left: 2px
  margin: 0
  content: ""
  visibility: hidden
  opacity: 0
  background-color: rgba(#000, 0.07)
  +cmi-border-radius(100%)
.cmi-span.cmi-checkbox
  position: relative
  display: inline-block
  overflow: hidden
  z-index: 1
  width: 20px
  height: 20px
  top: 3px
  margin-right: 11px
  border: none
  outline: none
  font: normal normal normal 24px/1 MaterialDesignIcons
  +cmi-border-radius(2px)
  &:before
    position: relative
    content: "\f1df"
    top: -3px
    left: -2px
    font-size: 23px
    line-height: 23px
    color: rgba(#000, 0.5)
&.cmi-valid
  .cmi-label
    color: $checkbox-color-valid
&.cmi-invalid
  .cmi-label
    color: $checkbox-color-invalid
p.cmi-hint, .cmi-p.cmi-hint
  margin: 0 0 0 40px
  font-size: 0.86em
  color: $checkbox-color-hint
  &.cmi-valid
    color: $checkbox-color-valid
  &.cmi-invalid
    color: $checkbox-color-invalid
.cmi-label:hover
  .cmi-animation
    visibility: visible
    opacity: 1
    +transition(all 0.1s linear)
&.cmi-active
  .cmi-span.cmi-checkbox:before
    color: $checkbox-color-check
    content: "\f1e0"