_fancy-button.sass

=fancy-button-base
  button
    position: relative
    border: 0
    padding: 0
    cursor: pointer
    overflow: visible

    &::-moz-focus-inner
      border: none

    span
      position: relative
      display: block
      white-space: nowrap
    
    // reset outline focus for styled buttons
    &:focus
      outline: 0
  
=fancy-button(!sprite_image, !height = 36px, !top_space = 9px, !right_space = 14px, !left_space = 14px, !font_size = 1.2em, !font_color = #444, !font_shadow = #ddd, !font_shadow_offset = 1px)
  !hover_class = "hover"

  padding= 0 !right_space 0 0
  font-size= !font_size
  text-align: center
  background= "transparent" image_url(!sprite_image) "no-repeat" "right" -140px

  span
    padding= !top_space 0 0 !left_space
    height= !height - !top_space
    background= "transparent" image_url(!sprite_image) "no-repeat" "left" "top"
    color= !font_color
    text-shadow= !font_shadow 0px !font_shadow_offset 0px
    font-weight: bold

  &:hover
    background-position: right -210px

  &.#{!hover_class}
    background-position: right -210px

  &:hover span, &.#{!hover_class} span
    background-position: 0 -70px

=fancy-button-scaled(!sprite_image, !height, !font_color = #444, !font_shadow = #ddd, !font_shadow_offset = 1px)
  !top_space = !height / 3 - 3px
  !right_space = !height / 3
  !left_space = !height / 3
  !font_size = ((!height / 45px - .4px) / 1px) * 1em + .8em

  +fancy-button(!sprite_image, !height, !top_space, !right_space, !left_space, !font_size, !font_color, !font_shadow, !font_shadow_offset)