u-set-checkbox-fill($color, $borderColor, $bgColor)
  .tick
    fill $color
  .border
    fill $borderColor
  .bg
    fill $bgColor

.n-checkbox
.n-radio
  display inline-flex
  align-items center
  cursor pointer
  white-space nowrap
  color $n-color-1
  vertical-align middle
  font-size 12px
  line-height 20px
  &-label
    margin-left 8px
  &-disabled
    cursor default
    color $n-color-4


.n-checkbox-group .n-checkbox
.n-radio-group .n-radio
  margin-right 22px


.n-checkbox-icon .transition
.n-radio-icon .transition
    transition fill 0.1s ease-in

.n-checkbox-icon
  u-set-checkbox-fill(#FFF, $n-color-5, #FFF)
  &.hover
    u-set-checkbox-fill(#FFF, $primary-color, #FFF)
  &.active
    u-set-checkbox-fill(#FFF, $primary-color, $primary-color)
  &.active.hover
    u-set-checkbox-fill(#FFF, tint($primary-color, 20%), tint($primary-color, 20%))
  &.indeterminate
    u-set-checkbox-fill($primary-color, $primary-color, #FFF)
  &.indeterminate.hover
    u-set-checkbox-fill(tint($primary-color, 20%), tint($primary-color, 20%), #FFF)
  &.disabled
    u-set-checkbox-fill(#FFF, $n-color-5, $n-color-7)
  &.active.disabled
  &.indeterminate.disabled
    u-set-checkbox-fill($n-color-5, $n-color-5, $n-color-7)

.n-radio-icon
  u-set-checkbox-fill(#FFF, $n-color-5, #FFF)
  &.hover
    u-set-checkbox-fill(#FFF, $primary-color, #FFF)
  &.active
    u-set-checkbox-fill($primary-color, $primary-color, #FFF)
  &.active.hover
    u-set-checkbox-fill(tint($primary-color, 20%), tint($primary-color, 20%), #FFF)
  &.disabled
    u-set-checkbox-fill(#FFF, $n-color-5, $n-color-7)
  &.active.disabled
    u-set-checkbox-fill($n-color-5, $n-color-5, $n-color-7)