SpinBox < UISpinBox
  font: verdana-11px-antialised
  color: #aaaaaa
  size: 86 20
  text-offset: 0 3
  text-margin: 3
  image-source: /images/textedit.png
  image-border: 1

  $disabled:
    color: #aaaaaa88

  Button
    id: up
    size: 10 10
    image-source: /images/spinbox_up.png
    image-border: 1
    image-clip: 0 0 10 10
    anchors.top: parent.top
    anchors.right: parent.right
    @onClick: self:getParent():up()

    $hover:
      image-clip: 0 10 10 10
    $pressed:
      image-clip: 0 20 10 10

  Button
    id: down
    size: 10 10
    image-source: /images/spinbox_down.png
    image-border: 1
    image-clip: 0 0 10 10
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    @onClick: self:getParent():down()

    $hover:
      image-clip: 0 10 10 10
    $pressed:
      image-clip: 0 20 10 10