@charset 'utf-8'

@import 'colors'

.ui-kit-checkbox-container
  display: block
  cursor: pointer
  margin: 30px 0 10px 0
  height: 24px
  .ui-kit-checkbox
    width: 24px
    height: 24px
    border-radius: 3px
    border: 1px solid $border-color
    background: $white
    float: left
    display: block
  span
    float: left
    color: $input-color
    font-size: 14px
    padding-top: 3px
    margin-left: 5px
    display: block
  i
    font-size: 36px
    display: block
    margin: -10px 0 0 4px
  &.checked
    .ui-kit-checkbox
      background: rgba($primary, 0.15)
    span
      color: $primary
    i
      color: $primary

  &.danger
    &.checked
      .ui-kit-checkbox
        background: rgba($red, 0.15)
      span
        color: $red
      i
        color: $red

  &.warning
    &.checked
      .ui-kit-checkbox
        background: rgba($yellow, 0.15)
      span
        color: $yellow
      i
        color: $yellow

  &.success
    &.checked
      .ui-kit-checkbox
        background: rgba($green, 0.15)
      span
        color: $green
      i
        color: $green