SpellPreview < UICheckBox
  height: 34
  text-wrap: true
  focusable: true
  text-offset: 38 2
  color: #cccccc
  border-width: 1
  border-color: #3a3018
  margin-top: 1
  background-color: #151515

  $hover !disabled:
    color: #c5a059
    background-color: #1e1a0e
    border-color: #c5a059

  $!checked:
    background-color: #151515

  $checked:
    background-color: #2a2010
    color: #c5a059
    border-color: #c5a059

  $disabled:
    image-color: #dfdfdf88
    color: #555555
    border-color: #222222
    opacity: 0.8

  UIWidget
    id: image
    anchors.left: parent.left
    anchors.top: parent.top
    phantom: true
    padding: 1
    size: 32 32

    Panel
      id: gray
      size: 32 32
      anchors.left: parent.left
      anchors.top: parent.top
      margin-top: -1
      margin-left: -1
      image-source: /images/ui/ditherpattern
      visible: false

  UIWidget
    id: imageGroup
    size: 20 20
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 8
    margin-right: 99
    phantom: true
    visible: false
    image-source: /images/game/spells/spellgroup-icons-20x20
    image-clip: 1 25 20 20

  Label
    id: levelLabel
    anchors.top: parent.top
    anchors.left: prev.right
    margin-top: 12
    margin-left: 6
    !text: tr('Level: 0')

    text-auto-resize: true
    visible: false

PassivePreview < UICheckBox
  height: 34
  focusable: true
  text-offset: 38 8
  change-cursor-image: false
  margin-top: 2
  margin-left: 3
  color: #cccccc

  $hover !disabled:
    color: #c5a059
    background-color: #1a1a1a

  $!checked:
    background-color: alpha

  $checked:
    background-color: #2a2010
    color: #c5a059

  $disabled:
    image-color: #dfdfdf88
    color: #555555
    opacity: 0.8

  UIWidget
    id: image
    anchors.left: parent.left
    anchors.top: parent.top
    phantom: true
    padding: 1
    size: 34 34

SpecialButton < UIButton
  size: 68 20
  font: verdana-8px-rounded
  text-align: center
  image-source: /images/ui/button
  image-clip: 0 0 22 23
  image-border: 3
  image-color: #484848ee
  color: #c5a059
  border-width: 1
  border-color: #4a3d1a

  $hover !disabled:
    image-color: #585858ee
    color: #ddc080
    border-color: #c5a059

  $pressed:
    image-clip: 0 46 22 23
    image-color: #3a3a3aee
    border-color: #c5a059

  $on:
    image-clip: 0 46 22 23
    image-color: #555540cc
    color: #c5a059
    border-color: #c5a059

  $disabled:
    image-color: #0d0d0dbb
    color: #444444
    border-color: #222222
    opacity: 0.75
