@import border_radius.sass
@import fancy_gradient.sass

!default_button_font_size ||= 18px
!default_button_color ||= #444
!default_button_font_weight ||= "bold"
!default_button_border_width ||= 1px
!default_button_radius ||= 6px

// Make a fancy button.
=fancy-button(!color= !default_button_color, !font_size= !default_button_font_size, !radius= !default_button_radius, !border_width= !default_button_border_width)
  +fancy-button-structure(!font_size, !radius, !border_width)
  +fancy-button-colors(!color)

// Style the button's colors, picking the most appropriate color set for the base color.
=fancy-button-colors(!color = !default_button_color, !hover = 0, !active = 0)
  @if !hover == 0
    !hover = darken(!color, 3)
  @if !active == 0
    !active = darken(!color, 6)
  
  +fb-color(!color)
  &:hover, &:focus
    +fb-color(!hover)
  &:active
    +fb-color(!active)

// Default state color settings
=fb-color(!color)
  !gradient_top = lighten(!color, 15)
  !gradient_bottom = darken(!color, 06)
  !border_color = darken(!color, 08)
  @if saturation(!color) > 0
    !color = saturate(!color, 40)
  +fb-state-colors(!color, !gradient_top, !gradient_bottom, !border_color)

// Apply the button colors specified for the button state into which it is mixed.
=fb-state-colors(!color, !gradient_top, !gradient_bottom, !border)
  !text_shadow = darken(!color, 25)
  color: #fff
  background-color= !color
  +fancy-gradient(!gradient_top, !gradient_bottom)
  @if luminosity(!color) < luminosity(#aaa)
    text-shadow= !text_shadow "1px 1px 1px"
  @else
    text-shadow= lighten(!color, 10) "1px 1px 1px"
    color: #333
  border:
    color= !border

// Apply this mixin to a nested element to style an arrow
=fancy-arrow(!font_size)
  font-size= !font_size + 4px
  line-height= !font_size - 4px
  margin-left= 4px

// Layout the button's box
=fancy-button-structure(!font_size = !default_button_font_size, !radius = !default_button_radius, !border_width = !default_button_border_width, !line_height = !font_size * 1.2)
  +fb-reset
  +fancy-button-size(!font_size, !radius, !line_height)
  border-width= !border_width
  &:active
    border-width= !border_width + 1px
  &.disabled:active
    border-width= !border_width

=fancy-button-size(!font_size = !default_button_font_size, !radius = !default_button_radius, !line_height = !font_size * 1.2)
  !v_padding = floor(!font_size/3.5)
  !h_padding = floor(!font_size)
  !v_padding_active = !v_padding - 1px
  !h_padding_active = !h_padding - 1px
  @if !radius > 0
    +border-radius(!radius)
  padding= !v_padding !h_padding
  font-size= !font_size
  line-height= !line_height
  &:active
    padding= !v_padding_active !h_padding_active
  &.disabled:active
    padding= !v_padding !h_padding

// Reset the button's important properties to make sure they behave correctly
=fb-reset(!font_weight = !default_button_font_weight)
  font-family: "Lucida Grande", Lucida, Arial, sans_serif
  background: #{image_url("button_bg.png")} repeat-x bottom left
  margin: 0
  display: inline-block
  cursor: pointer
  text-decoration: none
  border-style: solid
  font-weight= !font_weight
  &::-moz-focus-inner
    border: none
    padding: 0
  &:focus
    outline: none

=disable-button(!opacity = .7)
  +opacity(!opacity)
  &:hover
    cursor: default