$checkboxBorderColor = $UI.colors.darkLight
$checkedColor = $UI.colors.primary
$checkedIconColor = $UI.colors.white
$errorColor = $UI.colors.attention
$switchBg = $UI.colors.dark
$height = 2u

.readonly
  fontFamily('normal', 900)
  font-size 2u
  line-height $height

.checkbox
  height $height
  width @height
  border 2px solid $checkboxBorderColor
  justify-content center
  align-items center
  // due to border-radius on emulator
  // you can see white 1px boundary between border and background
  border-radius 2px
  overflow hidden

  // NOTE:
  // We do not change the background color for the error
  // because this behavior is not possible
  // but if it is necessary for some reason
  // then we need to change it for the checkbox-animation class too
  // IMPORTANT: checked modifier should overlaps error modifier
  &.error
    border-color $errorColor

  &.checked
    background-color $checkedColor
    border-color $checkedColor

.checkbox-icon
  display none
  color $checkedIconColor

  &.checked
    display flex

// NOTE: opacity is workaround because display none and position absolute doesn't work right
// https://github.com/facebook/react-native/issues/18415
.checkbox-animation
  opacity 0
  position absolute
  left 0
  top 0
  bottom 0
  right 0
  background-color $checkedColor

  &.animated
    opacity 1

.switch
  width 3u
  height $height
  radius(circle)
  justify-content center
  background-color $switchBg
  padding 0 3px

  // IMPORTANT: checked modifier should overlaps error modifier
  &.error
    background-color $errorColor

  &.checked
    background-color $checkedColor

.switch-animation
  width 10px
  height @width
  background-color white
  radius(circle)

:export
  colors: $UI.colors