// GameCheckbox y radio (guía A.5, paso 2.4). casilla.png / radio.png (generar-piel.py), 12x12, 6 estados:
// 0 sin marcar · 12 sin marcar + hover · 24 marcada (acento) · 36 marcada + hover · 48 desactivada · 60 marcada desactivada.
// Texto a 8 px de la casilla (escala de 4). El orden importa: gana el último estado que aplica.
CheckBox < UICheckBox
  ttf-font: $otmmo-font
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text
  size: 12 12
  text-align: left
  text-offset: 20 -1
  image-rect: 0 0 12 12
  image-source: /images/ui/casilla
  image-clip: 0 0 12 12
  change-cursor-image: true
  cursor: pointer

  $hover !disabled:
    image-clip: 0 12 12 12

  $checked:
    image-clip: 0 24 12 12

  $hover checked !disabled:
    image-clip: 0 36 12 12

  $disabled:
    image-clip: 0 48 12 12
    color: $otmmo-text-disabled
    change-cursor-image: false

  $disabled checked:
    image-clip: 0 60 12 12

CheckBoxCircle < CheckBox
  image-source: /images/ui/radio

RadioButton < CheckBoxCircle

ThickCheckBox < CheckBox
  size: 18 18
  image-rect: 0 0 12 12
  image-offset: 3 3
  text-offset: 22 0

ColorBox < UICheckBox
  size: 13 13
  image-color: #dfdfdfff
  image-source: /images/ui/colorbox-border-13

  $checked:
    image-clip: 0 13 13 13

  $!checked:
    image-clip: 0 0 13 13

ButtonBox < UICheckBox
  font: verdana-11px-antialised
  color: white
  size: 106 23
  text-offset: 0 0
  text-align: center
  image-source: /images/ui/button
  image-color: #dfdfdf
  image-clip: 0 0 22 23
  image-border: 3
  change-cursor-image: true
  cursor: pointer

  $hover !disabled:
    image-clip: 0 23 22 23

  $checked:
    image-clip: 0 46 22 23
    color: white
    text-offset: 2 2
    change-cursor-image: false

  $disabled:
    color: #dfdfdf88
    image-color: #dfdfdf88
    change-cursor-image: false

ButtonBoxRounded < ButtonBox
  image-source: /images/ui/button_rounded

QtCheckBox < CheckBox
  size: 14 14
  image-rect: 1 1 12 12
  text-offset: 20 0

fakeCheckBox < UICheckBox
  font: cipsoftFont
  size: 106 23
  image-source: /images/ui/button
  image-clip: 0 0 22 23
  image-border: 3
  padding: 5 10 5 10
  opacity: 1.0
  color: #b9b9b9ff

  $hover !disabled:
    color: #ffffff

  $!checked:
    image-clip: 0 0 22 23

  $hover !checked:
    image-clip: 0 0 22 23

  $checked:
    image-clip: 0 46 22 23

  $hover checked:
    image-clip: 0 46 22 23

  $disabled:
    image-color: #dfdfdf88
    color: #dfdfdf88
    opacity: 0.8

CheckBoxButton < UICheckBox
  size: 106 23
  image-source: /images/ui/button-9grid-idle
  image-border: 3
  text-align: center
  padding: 5 10 5 10
  change-cursor-image: true
  cursor: pointer
  color: #BDBDBD
  $checked:
    image-source: /images/ui/button-9grid-pressed
    text-offset: 1 1
  $!checked:
    text-offset: 0 0
  $disabled:
    color: #dfdfdf88
    opacity: 0.8
    change-cursor-image: false