button-bg(clr)
  clr          = lighten(clr, 50%)
  light        = lighten(clr, 30%)
  dark-clr     = darken(clr, 20%)
  darker-clr   = darken(clr, 50%)
  darkest-clr  = darken(darker-clr, 20%)
  btn-clr      = darken(darkest-clr, 30%)
  background   linear-gradient(top, clr, dark-clr)
  border       1px solid darker-clr
  border-top-color rgba(0, 0, 0, .1)
  border-left-color rgba(0, 0, 0, .2)
  border-right-color @border-left-color
  border-bottom-color rgba(0, 0, 0, .3)
  color        btn-clr
  &:hover
    background linear-gradient(top, light, clr)
    color lighten(btn-clr, 20%)
    text-shadow   0 -1px 0 rgba(255, 255, 255, .10)
  &:active, &.pressed
    color darken(btn-clr, 50%)
    text-shadow none
    border-color darkest-clr
  &.pressed
    background darker-clr
  &:active
    background darkest-clr

.button
  clearfix()
  button-bg(#eee)
  display       inline-block
  height        32px
  line-height   @height
  border-radius 4px
  margin-bottom 6px
  padding       0 10px
  cursor        pointer
  color         #333
  text-shadow   0 -1px 0 rgba(255, 255, 255, .25)
  box-shadow    inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.25)
  position      relative
  &.block
    display block
  &:hover
    box-shadow  inset 0 1px 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.125)
  .main_text
    narrow-font()
    font-weight 700
    float       left
  .meta_info
    font-size   12px
    float       right
    font-family "Helvetica Neue", sans-serif
  &.big
    font-size 1.5em
    height 3em
    line-height @height
    text-align center
    .main_text
      float none
    .meta_info
      position absolute
      top 0
      right 1em
  &.button_blue
    background linear-gradient(top, #0066cc, #0044cc)
    text-shadow 0 -1px rgba(0, 0, 0, .3)
    color #fff
    &:hover
      background linear-gradient(top, #0088cc, #0066cc)
  &.button_red
    background linear-gradient(top, #cc6600, #cc4400)
    text-shadow 0 -1px rgba(0, 0, 0, .3)
    color #fff
    &:hover
      background linear-gradient(top, #cc8800, #cc6600)
  for $array in $types
    &.{$array[0]}
      button-bg($array[1])
  &.disabled, &.disabled:hover
    background  #333
    border-color #000
    cursor      default
    color       #666
    text-shadow none
    box-shadow none

.hover_info_moves
  .hover_info
    width 196px
    display block
    margin 0
    &:first-child
      border-radius 4px 4px 0 0
    &:last-child
      border-radius 0 0 4px 4px
      border-top none
    &:not(:first-child):not(:last-child)
      border-radius 0
      border-top none