// OT-MMO: casilla de 44 px (fase 3, concepto A.6b): pizarra con borde fino, tecla arriba a la izquierda en Geist Mono,
// recarga que barre con la cifra encima. Imágenes de scripts/generar-hud.py. Los íconos son los originales del juego.
ActionButton < UIButton
  font: cipsoftFont
  size: 44 44
  margin-left: 2
  image-source: /images/game/actionbar/otmmo-slot-empty
  Item
    id: item
    anchors.fill: parent
    padding: 6
    virtual: true
    draggable: true
    &selectable: true
    &editable: false
    font: verdana-8px-rounded
    always-show-count: true
    $!on:
      image-source: /images/game/actionbar/otmmo-slot-empty
      image-color: #ffffff
      image-border: 0
    $on:
      image-source: /images/game/actionbar/otmmo-slot
      image-color: #ffffff
      image-border: 0
    $pressed on:
      image-color: #c8c8c8
      margin-top: 1
    $checked on:
      image-color: #c8c8c8

    Panel
      id: gray
      anchors.fill: parent
      image-source: /images/game/actionbar/otmmo-nomana
      visible: false
    Label
      id: text
      size: 30 27
      anchors.fill: prev
      text-wrap: true
      text-align: center
      margin: 1
      ttf-font: $otmmo-font
      ttf-font-size: $otmmo-size-xs
      color: $otmmo-text
      phantom: true
      Panel
        id: gray
        anchors.fill: parent
        image-source: /images/game/actionbar/otmmo-nomana
        visible: false

  Label
    id: hotkeyLabel
    anchors.top: parent.top
    anchors.left: parent.left
    margin-left: 4
    margin-top: 2
    color: $otmmo-text-2
    text-align: left
    text-auto-resize: true
    text-wrap: false
    phantom: true
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-xs
    ttf-stroke: 1 #10161C

  Label
    id: parameterText
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-bottom: 1
    margin-left: 4
    margin-right: 2
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-xs
    ttf-stroke: 1 #10161C
    color: $otmmo-text
    phantom: true
    text-align: left

  UIProgressRect
    id: cooldown
    background: #10161CC4
    percent: 100
    focusable: false
    phantom: true
    anchors.fill: parent
    margin: 1
    font: verdana-11px-rounded
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-md
    ttf-stroke: 1 #10161C
    color: $otmmo-text
    border-color: $otmmo-accent
  
  Panel
    id: activeSpell
    anchors.fill: parent
    margin: 1 1 1 1
    image-source: /images/game/actionbar/otmmo-activespell
    phantom: true
    visible: false

  UIWidget
    id: multiIcon
    image-source: /images/game/actionbar/marker-multiactionbutton
    size: 5 11
    anchors.left: parent.left
    anchors.top: parent.top
    margin-left: 1
    margin-top: 1
    phantom: true
    visible: false

LeftSliders < Panel
  size: 17 34
  UIButton
    id: prev
    size: 17 17
    anchors.top: parent.top
    anchors.left: parent.left
    @onClick: modules.game_actionbar.moveActionButtons(self)
    image-source: /images/game/actionbar/arrow-left
    image-clip: 0 0 17 17
    margin-left: -1
    $pressed:
      image-clip: 0 17 17 17
    $!on:
      image-clip: 0 34 17 17
      tooltip: No further action buttons in this direction
    $on:
      tooltip: Move to the previous action button

  UIButton
    id: first
    size: 17 17
    anchors.top: prev.bottom
    anchors.left: parent.left
    @onClick: modules.game_actionbar.moveActionButtons(self)
    image-source: /images/game/actionbar/double-arrow-left
    image-clip: 0 0 17 17
    margin-left: -1
    margin-top: 1

    $pressed:
      image-clip: 0 17 17 17

    $!on:
      image-clip: 0 34 17 17
      tooltip: No further action buttons in this direction

    $on:
      tooltip: Move to the first action button

RightSliders < Panel
  size: 17 34

  UIButton
    id: next
    size: 17 17
    anchors.top: parent.top
    anchors.right: parent.right
    margin-right: -1
    @onClick: modules.game_actionbar.moveActionButtons(self)
    image-source: /images/game/actionbar/arrow-right
    image-clip: 0 0 17 17
    on: true

    $pressed:
      image-clip: 0 17 17 17

    $!on:
      image-clip: 0 34 17 17
      tooltip: No further action buttons in this direction

    $on:
      tooltip: Move to the next action button

  UIButton
    id: last
    size: 17 17
    anchors.top: parent.top
    anchors.right: parent.right
    margin-right: -1
    margin-top: 17
    @onClick: modules.game_actionbar.moveActionButtons(self)
    on: true
    image-source: /images/game/actionbar/double-arrow-right
    image-clip: 0 0 17 17

    $pressed:
      image-clip: 0 17 17 17

    $!on:
      image-clip: 0 34 17 17
      tooltip: No further action buttons in this direction

    $on:
      tooltip: Move to the last action button

Panel
  id: actionBar
  focusable: false
  image-source: /images/game/actionbar/otmmo-bar
  image-border: 5
  padding-top: 1
  padding-bottom: 1

  $on:
    height: 46
    visible: true

  $!on:
    height: 0
    visible: false

  LeftSliders
    id: prevPanel
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 1
    margin-top: -1

  ScrollablePanel
    id: tabBar
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: prev.right
    anchors.right: nextPanel.left
    //margin-left: 1
    margin-right: 4
    margin-top: -2
    horizontal-scrollbar: actionScroll
    layout: horizontalBox
    @onGeometryChange: modules.game_actionbar.updateVisibleWidgets()

  HorizontalScrollBar
    id: actionScroll
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    step: 46
    pixels-scroll: true
    visible: false

  RightSliders
    id: nextPanel
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    margin-right: 1
    margin-top: -1