SpinBox < TextEdit
  __class: UISpinBox
  size: 86 20
  padding: 0

  Button
    id: up
    size: 10 10
    image-source: /images/ui/spinbox_up
    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/ui/spinbox_down
    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