.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"