@import compass/css3.sass
@import fancy_gradient.sass

!fb_gradient_style ||= "glossy"
!fb_invert_on_click ||= 1
!fb_font_size ||= 18px
!fb_color ||= #444
!fb_font_weight ||= "bold"
!fb_border_width ||= 1px
!fb_radius ||= 6px
!fb_light_text ||= #fff
!fb_dark_text ||= #222
!fb_gradient ||= 1

// Make a fancy button.
=fancy-button(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_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 = !fb_color, !hover = 0, !active = 0)
  +fb-color(!color, "default")
  &:hover, &:focus
    @if !hover == 0
      +fb-color(darken(!color, 3), "hover", !color)
    @else
      +fb-color(!hover, "hover")
  &:active
    @if !active == 0
      +fb-color(darken(!color, 6), "active", !color)
    @else
      +fb-color(!active, "active")

=fancy-button-matte(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
  +fancy-button-structure(!font_size, !radius, !border_width)
  +fancy-button-colors-matte(!color)

=fancy-button-custom(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
  +fancy-button-structure(!font_size, !radius, !border_width)
  +fancy-button-colors-custom(!color, !font_size, !radius, !border_width)

=fancy-button-colors-matte(!color = !fb_color, !hover = 0, !active = 0)
  !fb_current_style = !fb_gradient_style
  !fb_gradient_style = "matte"
  +fancy-button-colors(!color, !hover, !active)
  !fb_gradient_style = !fb_current_style

=fancy-button-colors-custom(!color = !fb_color, !hover = 0, !active = 0)
  !fb_current_style = !fb_gradient_style
  !fb_gradient_style = "custom"
  +fancy-button-colors(!color, !hover, !active)
  !fb_gradient_style = !fb_current_style

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

// Apply the button colors specified for the button state into which it is mixed.
=fb-state-colors(!color, !gradient_top, !gradient_bottom, !border, !state, !lumins = !color)
  background-color= !color
  @if !fb_gradient != 0
    @if !fb_gradient_style == "glossy"
      @if !fb_invert_on_click != 0 and !state == "active"
        +invert-fancy-gradient(!gradient_top, !gradient_bottom)
      @else
        +fancy-gradient(!gradient_top, !gradient_bottom)
    @else if !fb_gradient_style == "matte"
      @if !fb_invert_on_click and !state == "active"
        +invert-fancy-matte-gradient(!gradient_top, !gradient_bottom)
      @else
        +fancy-matte-gradient(!gradient_top, !gradient_bottom)
    @else if !fb_gradient_style == "custom"
      @if !fb_invert_on_click and !state == "active"
        +invert-custom-fancy-gradient(!gradient_top, !gradient_bottom)
      @else
        +custom-fancy-gradient(!gradient_top, !gradient_bottom)
  border:
    color= !border
  !text_shadow_settings = "0px 1px 1px"
  @if !fb_invert_on_click != 0 and !state == "active"
    !text_shadow_settings = "0px -1px -1px"
  @if luminosity(!lumins) < luminosity(#aaa)
    text-shadow= darken(!color, 25) !text_shadow_settings
    color= !fb_light_text
  @else
    text-shadow= lighten(!color, 15) !text_shadow_settings
    color= !fb_dark_text

// 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 = !fb_font_size, !radius = !fb_radius, !border_width = !fb_border_width, !line_height = !font_size * 1.2)
  +fb-reset
  +fancy-button-size(!font_size, !radius, !border_width, !line_height)

=fancy-button-size(!font_size = !fb_font_size, !radius = !fb_radius, !border_width = !fb_border_width, !line_height = !font_size * 1.2)
  // better padding for smaller buttons
  !v_padding = 0
  !h_padding = 0
  @if !font_size > 15
    !v_padding = floor(!font_size/3.5)
    !h_padding = !font_size
  @else
    !v_padding = floor(!font_size/5)
    !h_padding = floor(!font_size/1.2)
  
  @if !radius > 0
    +border-radius(!radius)
  font-size= !font_size
  line-height= !line_height
  +fancy-button-padding(!v_padding, !h_padding, !border_width)

=fancy-button-padding(!v_padding, !h_padding, !border_width = !fb_border_width)
  !v_padding_active = !v_padding - 1px
  !h_padding_active = !h_padding - 1px
  padding= !v_padding !h_padding
  border-width= !border_width
  &:active
    padding= !v_padding_active !h_padding_active
    border-width= !border_width + 1px
  &.disabled:active
    padding= !v_padding !h_padding
    border-width= !border_width

// Reset the button's important properties to make sure they behave correctly
=fb-reset(!font_weight = !fb_font_weight)
  font-family: "Lucida Grande", Lucida, Arial, sans_serif
  background: #{image_url("button_bg.png")} repeat-x bottom left
  margin: 0
  width: auto
  overflow: visible
  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