MoveableTabBar < UIMoveableTabBar
  size: 80 21
MoveableTabBarPanel < Panel
MoveableTabBarButton < UIButton
  size: 96 18
  image-source: /images/ui/tabbutton_square
  image-clip: 0 0 96 22
  image-border: 3
  image-border-bottom: 0
  color: #7F7F7F
  anchors.top: parent.top
  anchors.left: parent.left
  margin-top: 2
  padding: 3

  $checked:
    image-clip: 0 36 96 22
    color: #dfdfdf

  $on !checked:
    color: #F75F5F

TabBar < UITabBar
  size: 80 21
  Panel
    id: buttonsPanel
    anchors.fill: parent
TabBarPanel < Panel
// GameTab (guía A.5, paso 2.4): la pestaña del juego. Texto text-2; hover y activa en text; la activa lleva un
// subrayado de 2 px de acento (A.6b). Sin caja ni fondo. Unifica LibroPestana, LgPestana y DgPestana.
// El estado «activa» es $checked (setChecked). El contenedor fija su alto (24) y el separador de 1 px debajo.
GameTab < UIWidget
  height: 24
  padding: 0 12
  text-auto-resize: true
  text-align: center
  focusable: false
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  border-width-bottom: 2
  border-color: alpha
  change-cursor-image: true
  cursor: pointer

  $hover !disabled:
    color: $otmmo-text

  $checked:
    color: $otmmo-text
    border-color: $otmmo-accent

  $disabled:
    color: $otmmo-text-disabled
    change-cursor-image: false

// Pestañas de las ventanas heredadas (UITabBar): mismo aspecto que GameTab
TabBarButton < UIButton
  size: 17 24
  padding: 0 12
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  icon-color: $otmmo-text-2
  border-width-bottom: 2
  border-color: alpha
  anchors.top: parent.top

  $first:
    anchors.left: parent.left

  $!first:
    anchors.left: prev.right
    margin-left: 4

  $hover !checked:
    color: $otmmo-text
    icon-color: $otmmo-text

  $disabled:
    color: $otmmo-text-disabled
    icon-color: $otmmo-text-disabled

  $checked:
    color: $otmmo-text
    icon-color: $otmmo-text
    border-color: $otmmo-accent

  $on !checked:
    color: $otmmo-warn

TabBarRounded < TabBar
TabBarRoundedPanel < TabBarPanel
TabBarRoundedButton < TabBarButton

TabBarVertical < UITabBar
  width: 96
  ScrollableFlatPanel
    id: buttonsPanel
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: scrollBar.left
    anchors.bottom: parent.bottom
    vertical-scrollbar: scrollBar
    margin-right: 1
    padding-top: 10
    
  VerticalScrollBar
    id: scrollBar
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    step: 16
    pixels-scroll: true
    $!on:
      width: 0
TabBarVerticalPanel < Panel
TabBarVerticalButton < UIButton
  size: 48 48
  color: #aaaaaa
  anchors.left: parent.left
  anchors.right: parent.right
  text-align: bottom
  icon-align: top
  icon-offset-y: 2
  icon-color: #888888
  $first:
    anchors.top: parent.top
  $!first:
    anchors.top: prev.bottom
    margin-top: 10
  $hover !checked:
    color: white
    icon-color: #dfdfdf
  $disabled:
    icon-color: #333333
  $checked:
    icon-color: #ffffff
    color: #80c7f8
  $on !checked:
    color: #F55E5E

TabBarQtVerticalPanel < Panel
TabBarQtVerticalButton < UIButton
  font: cipsoftFont
  size: 114 21
  anchors.left: parent.left
  anchors.right: parent.right
  margin-left: 7
  margin-right: 7
  icon-align: left
  icon-offset: 6 0
  text-align: center
  text-offset: 0 2
  color: #b9b9b9ff
  image-source: /images/ui/tabbutton_new_shadowed
  image-clip: 0 0 114 21
  $first:
    anchors.top: parent.top
    margin-top: 7
  $!first:
    anchors.top: prev.bottom
    margin-top: 10
  $checked:
    image-clip: 0 21 114 21
    text-offset: 1 3
    icon-offset: 7 1
  $!checked:
    image-clip: 0 0 114 21
    text-offset: 0 2
    icon-offset: 6 0

TabBarQtVertical < UITabBar
  size: 128 442

  UIWidget
    anchors.fill: parent
    image-source: /images/ui/background_dark
    image-repeated: true

  UIWidget
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    image-source: /images/ui/2pixel_up_frame_borderimage_dark
    image-clip: 2 0 96 2
    height: 2

  UIWidget
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    image-source: /images/ui/2pixel_up_frame_borderimage_dark
    image-clip: 0 2 2 96
    width: 2

  UIWidget
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    image-source: /images/ui/2pixel_up_frame_borderimage_dark
    image-clip: 2 98 96 2
    height: 2

  UIWidget
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    image-source: /images/ui/2pixel_up_frame_borderimage_dark
    image-clip: 98 2 2 96
    width: 2

  UIWidget
    anchors.top: parent.top
    anchors.left: parent.left
    image-source: /images/ui/2pixel_up_frame_borderimage_dark
    image-clip: 0 0 2 2
    size: 2 2

  UIWidget
    anchors.top: parent.top
    anchors.right: parent.right
    image-source: /images/ui/2pixel_up_frame_borderimage_dark
    image-clip: 98 0 2 2
    size: 2 2

  UIWidget
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    image-source: /images/ui/2pixel_up_frame_borderimage_dark
    image-clip: 0 98 2 2
    size: 2 2

  UIWidget
    anchors.bottom: parent.bottom
    anchors.right: parent.left
    image-source: /images/ui/2pixel_up_frame_borderimage_dark
    image-clip: 98 98 2 2
    size: 2 2

  ScrollablePanel
    id: buttonsPanel
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: scrollBar.left
    anchors.bottom: parent.bottom
    vertical-scrollbar: scrollBar

  VerticalScrollBar
    id: scrollBar
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    step: 16
    pixels-scroll: true
    $!on:
      width: 0