SmallScrollBar < UIScrollBar
  orientation: vertical
  margin-bottom: 1
  step: 20
  width: 8
  image-source: /images/ui/scrollbar
  image-clip: 50 0 12 96
  image-border-left: 1
  image-border-right: 1
  pixels-scroll: true

  UIButton
    id: decrementButton
    anchors.top: parent.top
    anchors.left: parent.left
    image-source: /images/ui/scrollbar
    image-clip: 1 1 12 12
    image-color: #ffffffff
    size: 8 8
    $hover:
      image-clip: 14 1 12 12
    $pressed:
      image-clip: 26 1 12 12

  UIButton
    id: incrementButton
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    size: 8 8
    image-source: /images/ui/scrollbar
    image-clip: 1 14 12 12
    image-color: #ffffffff
    $hover:
      image-clip: 14 14 12 12
    $pressed:
      image-clip: 26 14 12 12

  UIButton
    id: sliderButton
    anchors.centerIn: parent
    size: 8 11
    image-source: /images/ui/scrollbar
    image-clip: 38 0 12 44
    image-color: #ffffffff
    image-border-left: 2
    image-border-right: 2
    image-border-top: 6
    image-border-bottom: 6
    $hover:
      image-clip: 13 26 13 13
    $pressed:
      image-clip: 26 26 13 13
        
  Label
    id: valueLabel
    anchors.fill: parent
    color: white
    text-align: center