@import '../utilities/colors'

$checkbox-color: $primary

.material-checkbox
  box-sizing: content-box
  display: inline-block
  position: relative
  width: 18px
  height: 18px
  padding: 11px
  line-height: 0
  white-space: nowrap
  cursor: pointer
  vertical-align: bottom

  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: $checkbox-color
    opacity: 0
    pointer-events: none
    border-radius: 50%
    z-index: 1
    transition: opacity 0.25s ease, background-color 0.25s ease
  
  &:hover:before
    opacity: 0.04

  &:focus:before
    opacity: 0.08

  &:active:before
    opacity: 0.16

.material-checkbox__native-control
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  opacity: 0
  cursor: inherit

.material-checkbox__background
  box-sizing: border-box
  position: absolute
  left: 11px
  top: 11px
  bottom: 0
  display: flex
  align-items: center
  justify-content: center
  width: 45%
  height: 45%
  border: 2px solid currentColor
  border-radius: 2px
  background-color: transparent
  pointer-events: none
  will-change: background-color, border-color
  transition: background-color 0.1s cubic-bezier(.4,0,.6,1), border-color 0.1s cubic-bezier(.4,0,.6,1)

.material-checkbox__checkmark
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  width: 100%
  transition: opacity 0.25s cubic-bezier(.4,0,.6,1)
  opacity: 0
  color: #fff

.material-checkbox__checkmark-path
  transition: stroke-dashoffset 0.25s cubic-bezier(.4,0,.6,1)
  stroke: currentColor
  stroke-width: 3.12px
  stroke-dashoffset: 29.78334
  stroke-dasharray: 29.78334

.material-checkbox__native-control

  &:checked 

    & ~ .material-checkbox__background .material-checkbox__checkmark-path
      stroke-dashoffset: 0
    
    & ~ .material-checkbox__background .material-checkbox__checkmark
      transition: opacity 0.25s cubic-bezier(0,0,.2,1), transform 0.25s cubic-bezier(0,0,.2,1)
      opacity: 1

  &:indeterminate  ~ .material-checkbox__background .material-checkbox__checkmark-path
    stroke-dashoffset: 0

  &:enabled

    &:checked ~ .material-checkbox__background
      border-color: $checkbox-color
      background-color: $checkbox-color

    &:indeterminate ~ .material-checkbox__background
      border-color: $checkbox-color
      background-color: $checkbox-color

    & ~ .material-checkbox__background
      border-color: rgba(0,0,0,.54)
      background-color: transparent

  &:disabled
    cursor: default
    pointer-events: none

    &:not(:checked):not(:indeterminate) ~ .material-checkbox__background
      border-color: rgba(0,0,0,.26)

    &:checked ~ .material-checkbox__background
      border-color: transparent
      background-color: rgba(0,0,0,.26)

    &:indeterminate ~ .material-checkbox__background
      border-color: transparent
      background-color: rgba(0,0,0,.26)