// GameButton (guía A.5). buttons.png (scripts/generar-piel.py) apila 6 estados de 20 px:
// 0 normal (surface) · 20 hover (surface claro, borde claro) · 40 pulsado (bg-2) · 60 foco/seleccionado
// (borde acento) · 80 desactivado (bg-2) · 100 seleccionado + hover (surface claro, borde acento).
// Gana el último estado que aplica: el hover va ANTES que el seleccionado para no taparlo (Hombre/Mujer),
// y el foco solo se pinta sin el ratón encima. Pulsado baja el texto 1 px (B.5).
Button < UIButton
  font: cipsoftFont
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text
  size: 43 20
  text-offset: 0 0
  image-source: /images/ui/buttons
  image-clip: 0 0 43 20
  image-border: 3
  padding: 10
  opacity: 1.0
  click-sound: 2774

  $focus !disabled !hover:
    image-clip: 0 60 43 20

  $hover !disabled:
    image-clip: 0 20 43 20

  $on !disabled:
    image-clip: 0 60 43 20

  $checked !disabled:
    image-clip: 0 60 43 20

  $hover on !disabled:
    image-clip: 0 100 43 20

  $hover checked !disabled:
    image-clip: 0 100 43 20

  $pressed !disabled:
    image-clip: 0 40 43 20
    text-offset: 0 1

  $disabled:
    image-clip: 0 80 43 20
    color: $otmmo-text-disabled
    opacity: 1.0
    change-cursor-image: false

// GameButton principal: la acción primaria de una pantalla (Ingresar, Siguiente, Crear). Una por pantalla.
// button_primary.png (generar-piel.py) apila 5 estados de 20 px: normal (acento) · hover · pulsado ·
// foco (borde claro) · desactivado (bg-2). Texto bg sobre acento (contraste ~8:1).
PrimaryButton < Button
  image-source: /images/ui/button_primary
  color: $otmmo-bg

  $disabled:
    color: $otmmo-text-disabled

TabButton < UIButton
  size: 22 23
  image-source: /images/ui/tabbutton_rounded
  image-color: #dfdfdf
  image-clip: 0 0 22 23
  image-border: 3
  text-offset: 0 1
  icon-color: $otmmo-text
  color: $otmmo-text-2
  change-cursor-image: true
  cursor: pointer

  $hover !on:
    image-clip: 0 23 22 23
    color: $otmmo-text

  $disabled:
    image-color: #dfdfdf66
    icon-color: $otmmo-text-2
    change-cursor-image: false

  $on:
    image-clip: 0 46 22 23
    color: $otmmo-text

NextButton < UIButton
  size: 12 21
  image-source: /images/ui/arrow_horizontal
  image-clip: 12 0 12 21
  image-color: #ffffff
  text-offset: 0 1
  change-cursor-image: true
  cursor: pointer

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

  $pressed:
    image-clip: 12 21 12 21

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

PreviousButton < UIButton
  size: 12 21
  image-source: /images/ui/arrow_horizontal
  image-clip: 0 0 12 21
  image-color: #ffffff
  text-offset: 0 1
  change-cursor-image: true
  cursor: pointer

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

  $pressed:
    image-clip: 0 21 12 21

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

AddButton < UIButton
  size: 20 20
  image-source: /images/ui/icon_add
  image-color: #fafafa
  text-offset: 0 1
  change-cursor-image: true
  cursor: pointer

  $hover !disabled:
    image-color: #dfdfdf99

  $pressed:
    image-color: #dfdfdf44

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

TextButton < UIButton
  size: 22 23
  image-source: /images/ui/panel_map
  image-clip: 0 0 22 23
  image-border: 3
  text-offset: 0 1
  color: #e0e0e0

ImageButton < UIButton
  size: 22 23
  image-source: /images/ui/panel_map
  image-clip: 0 0 22 23
  image-border: 3
  text-offset: 0 1
  color: #e0e0e0

PreviousConsoleQtButton < UIButton
  size: 18 16
  image-source: /images/ui/console_direction_button
  image-clip: 36 0 18 16

  $pressed:
    image-clip: 18 0 18 16

  $pressed disabled:
    image-clip: 0 0 18 16

  $disabled:
    image-clip: 54 0 18 16

PreviousConsoleRedQtButton < UIButton
  size: 18 16
  image-source: /images/ui/console_direction_button
  image-clip: 90 0 18 16

  $pressed:
    image-clip: 72 0 18 16

  $pressed disabled:
    image-clip: 0 0 18 16

  $disabled:
    image-clip: 54 0 18 16

NextConsoleQtButton < UIButton
  size: 18 16
  image-source: /images/ui/console_direction_button
  image-clip: 36 16 18 16

  $pressed:
    image-clip: 18 16 18 16

  $pressed disabled:
    image-clip: 0 16 18 16

  $disabled:
    image-clip: 54 16 18 16

NextConsoleRedQtButton < UIButton
  size: 18 16
  image-source: /images/ui/console_direction_button
  image-clip: 90 16 18 16

  $pressed:
    image-clip: 72 16 18 16

  $pressed disabled:
    image-clip: 0 16 18 16

  $disabled:
    image-clip: 54 16 18 16

PreviousQtButton < UIButton
  size: 16 16
  image-source: /images/ui/regular_direction_button
  image-clip: 32 0 16 16

  $pressed:
    image-clip: 16 0 16 16

  $pressed disabled:
    image-clip: 0 0 16 16

  $disabled:
    image-clip: 48 0 16 16

NextQtButton < UIButton
  size: 16 16
  image-source: /images/ui/regular_direction_button
  image-clip: 32 16 16 16

  $pressed:
    image-clip: 16 16 16 16

  $pressed disabled:
    image-clip: 0 16 16 16

  $disabled:
    image-clip: 48 16 16 16

// Mismos estados que Button (button.png: 0 normal · 23 hover · 46 pulsado).
QtButton < UIButton
  font: cipsoftFont
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  size: 106 23
  text-offset: 0 0
  image-source: /images/ui/button
  image-clip: 0 0 22 23
  image-border: 3
  padding: 5 10 5 10
  opacity: 1.0
  color: $otmmo-text

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

  $pressed !disabled:
    image-clip: 0 46 22 23
    text-offset: 0 1

  $disabled:
    color: $otmmo-text-disabled
    opacity: 1.0

BigPremiumButton < UIButton
  size: 128 37
  image-source: /images/ui/getpremium
  image-clip: 0 0 128 37
  image-border: 3
  $pressed:
    image-clip: 0 37 128 37
  $!on:
    image-clip: 0 74 128 37
  $disabled:
    color: #dfdfdf88
    opacity: 0.8

MiniPremiumButton < UIButton
  size: 26 22
  image-source: /images/ui/miniStoreIcon
  image-clip: 0 0 26 22
  $pressed:
    image-clip: 0 22 26 22