OptionsTabBarVertical < UITabBar
  width: 130
  ScrollablePanel
    id: buttonsPanel
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: scrollBar.left
    anchors.bottom: parent.bottom
    image-source: /images/ui/menubox
    image-border: 3
    vertical-scrollbar: scrollBar
    margin-right: 1
    padding: 7
    layout: verticalBox

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

OptionsTabBarVerticalPanel < Panel

OptionsTabBarVerticalButton < Button
  height: 20
  icon-align: left
  icon-offset-x: 5
  text-offset: 0 2
  padding: 7
  font: cipsoftFont
  color: white

  $checked:
    image-clip: 0 46 22 23

  UIWidget
    id: arrow
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    image-source: /images/options/icon-downarrow
    size: 9 6
    
    $on:
      image-source: /images/options/icon-right-arrow
      size: 6 9

OptionsTabContent < Panel
  id: optionsTabContent
  anchors.top: optionsTabBar.top
  anchors.left: optionsTabBar.right
  anchors.right: parent.right
  anchors.bottom: optionsTabBar.bottom
  margin-left: 5
  image-source: /images/ui/menubox
  image-border: 3
  padding: 7

SmallButton < UIButton
  size: 106 20
  font: cipsoftFont
  text-offset: 0 2
  image-source: /images/ui/button
  image-clip: 0 0 22 23
  image-border: 3
  padding: 5 10 5 10
  change-cursor-image: true
  cursor: pointer
  color: #ffffff

  $hover !disabled:
    image-clip: 0 23 22 23

  $pressed:
    image-clip: 0 46 22 23
    text-offset: 1 2

  $disabled:
    color: #ffffff88
    change-cursor-image: false
