TopButton < UIButton
  background-color: white
  size: 26 26
  text-translate: 0 0
  border-image:
    source: /core_styles/images/top_button.png
    clip: 0 0 26 26
    border: 3

  $hover:
    border-image:
      source: /core_styles/images/top_button.png
      clip: 26 0 26 26
      border: 3

  $pressed:
    text-translate: 1 1
    border-image:
      source: /core_styles/images/top_button.png
      clip: 52 0 26 26
      border: 3

  $disabled:
    background-color: #ffffff66

TopLeftButton < TopButton
  $first:
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 4
    margin-left: 6

  $!first:
    anchors.top: prev.top
    anchors.left: prev.right
    margin-left: 6

TopRightButton < TopButton
  $first:
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 4
    margin-right: 6

  $!first:
    anchors.top: prev.top
    anchors.right: prev.left
    margin-right: 6

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
    anchors.right: next.left

  Panel
    id: rightButtonsPanel
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    width: 60

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