SideActionButton < UIButton
  font: cipsoftFont
  size: 34 34
  margin-top: 2
  image-source: /images/game/actionbar/actionbarslot
  Item
    id: item
    anchors.fill: parent
    padding: 1
    virtual: true
    draggable: true
    &selectable: true
    &editable: false
    font: verdana-8px-rounded
    always-show-count: true
    $!on:
      image-source: /images/game/actionbar/actionbarslot
      image-color: #dfdfdf
      image-clip: 0 0 34 34
      image-border: 0
    $on:
      image-source: /images/ui/button
      image-color: #dfdfdf
      image-clip: 0 0 22 23
      image-border: 3
    $pressed on:
      image-clip: 0 46 22 23
    $checked on:
      image-clip: 0 46 22 23

    Panel
      id: gray
      anchors.fill: parent
      image-source: /images/ui/ditherpattern
      visible: false
    Label
      id: text
      size: 30 27
      anchors.fill: prev
      text-wrap: true
      margin: 1
      text-align: center
      font:small-9px
      phantom: true
      Panel
        id: gray
        anchors.fill: parent
        image-source: /images/ui/ditherpattern
        visible: false

  Label
    id: hotkeyLabel
    anchors.top: parent.top
    anchors.right: parent.right
    margin-right: 2
    text-offset: 0 2
    text-allign: right
    text-auto-resize: true
    text-wrap: false
    phantom: true
    font: verdana-8px-rounded

  Label
    id: parameterText
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-bottom: 1
    margin-left: 2
    margin-right: 2
    font: small-9px
    phantom: true
    text-align: left

  UIProgressRect
    id: cooldown
    background: #101010aa
    percent: 100
    focusable: false
    phantom: true
    anchors.fill: parent
    font: verdana-11px-rounded
    color: white
    border-color: #9fa0a0
  Panel
    id: activeSpell
    anchors.fill: parent
    margin: 1 1 1 1
    image-source: /images/game/actionbar/border_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

TopSliders < Panel
  size: 34 17

  UIButton
    id: prev
    size: 17 17
    anchors.fill: parent
    anchors.right: parent.horizontalCenter
    @onClick: modules.game_actionbar.moveActionButtons(self)
    image-source: /images/game/actionbar/arrow-up
    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 previous action button

  UIButton
    id: first
    size: 17 17
    anchors.right: parent.right
    @onClick: modules.game_actionbar.moveActionButtons(self)
    image-source: /images/game/actionbar/double-arrow-up
    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 first action button

BottomSliders < Panel
  size: 34 17

  UIButton
    id: next
    size: 17 17
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.horizontalCenter
    margin-right: 1
    @onClick: modules.game_actionbar.moveActionButtons(self)
    image-source: /images/game/actionbar/arrow-down
    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.left: parent.horizontalCenter
    anchors.right: parent.right
    @onClick: modules.game_actionbar.moveActionButtons(self)
    image-source: /images/game/actionbar/double-arrow-down
    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 last action button

Panel
  id: actionBar
  focusable: false

  $on:
    width: 34
    visible: true

  $!on:
    width: 0
    visible: false

  TopSliders
    id: prevPanel
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter

  ScrollablePanel
    id: tabBar
    anchors.top: prev.bottom
    anchors.bottom: nextPanel.top
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 1
    margin-bottom: 4
    clipping: true
    vertical-scrollbar: actionScroll
    layout: verticalBox
    @onGeometryChange: modules.game_actionbar.updateVisibleWidgets()

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

  BottomSliders
    id: nextPanel
    anchors.bottom: parent.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-bottom: 2