TopButton < UIButton
  size: 26 26
  image-source: /core_styles/images/top_button.png
  image-clip: 0 0 26 26
  image-border: 3
  image-color: #ffffffff
  icon-color: #ffffffff

  $hover !disabled:
    image-color: #ffffff99
    image-clip: 26 0 26 26

  $pressed:
    image-clip: 52 0 26 26

  $disabled:
    image-color: #ffffff44
    icon-color: #ffffff44

GameTopButton < UIButton
  size: 26 26
  image-source: /core_styles/images/top_button2.png
  image-clip: 26 0 26 26
  image-color: #ffffff22
  icon-color: #ffffffff
  image-border: 3

  $on:
    image-clip: 0 0 26 26
    image-color: #ffffffff
    icon-color: #ffffffff

TopLeftButton < TopButton
TopRightButton < TopButton

TopPanel
  id: topMenu
  anchors.top: parent.top
  anchors.left: parent.left
  anchors.right: parent.right
  focusable: false

  Panel
    id: leftButtonsPanel
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    layout:
      type: horizontalBox
      spacing: 4
      fit-children: true
    padding: 6 4

  Panel
    id: gameButtonsPanel
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: prev.right
    anchors.right: next.left
    layout:
      type: horizontalBox
      spacing: 4
    padding: 6 4
    visible: false

  Panel
    id: rightButtonsPanel
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    layout:
      type: horizontalBox
      spacing: 4
      fit-children: true
    padding: 6 4

  FrameCounter
    id: frameCounter
    anchors.top: parent.top
    anchors.right: prev.left
    margin-top: 8
    margin-right: 5