.uif-checkbox
  font-size 12px
  line-height 20px
  min-height 20px
  display inline-block
  position relative
  padding-left 20px
  cursor pointer
  &-icon
    position absolute
    left 0
    top 2px

.uif-checkbox-icon .border
  fill #DBDDE2
.uif-checkbox-icon .bg
  fill #FFF

.uif-checkbox-icon-value .border
.uif-checkbox-icon-value .bg
  fill $primary-color
.uif-checkbox-icon-value .tick
  fill #FFF

.uif-checkbox:not(.disabled):hover
  color $primary-color
  .uif-checkbox-icon .border
    fill $primary-color

.uif-checkbox.disabled
  cursor not-allowed
.uif-checkbox-icon-disabled .border
.uif-checkbox-icon-disabled .tick
  fill #CACCD4
.uif-checkbox-icon-disabled .bg
  fill #E5E6EB

.uif-checkbox-group .uif-checkbox
.uif-radio-group .uif-radio
  margin-right 28px