@import compass/css3
@import fancy-gradient

$fb_gradient_style: glossy !default
$fb_invert_on_click: 1 !default
$fb_font_size: 18px !default
$fb_color: #444444 !default
$fb_font_weight: bold !default
$fb_border_width: 1px !default
$fb_radius: 6px !default
$fb_light_text: white !default
$fb_dark_text: #222222 !default
$fb_gradient: 1 !default
$fb_image_path: image_url("button_bg.png") !default

// 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")
  &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
    +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, 6)
  $border_color: darken($color, 8)
  @if $fb_invert_on_click != 0
    $border_color: darken($color, 15)
  @if saturation($color) > 0
    $color: saturate($color, 40)
  @else if lightness($lumins) >= lightness(#aaaaaa)
    $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: unquote("0px 1px 1px")
  @if $fb_invert_on_click != 0 and $state == "active"
    $text_shadow_settings: unquote("0px -1px -1px")
  @if lightness($lumins) < lightness(#aaaaaa)
    text-shadow: darken($color, 25) $text_shadow_settings
    &, &:visited
      color: $fb_light_text
  @else
    text-shadow: lighten($color, 15) $text_shadow_settings
    &, &:visited
      color: $fb_dark_text

=fancy-button-text-colors($color, $hover, $active)
  color: $color
  &:hover, &:focus
    color: $hover
  &:active
    color: $active
  &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
    color: $color

// 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, &[disabled]
    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: #{$fb_image_path} 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
  &.disabled, &[disabled]
    +disable-button

=disable-button($opacity: 0.7)
  +opacity($opacity)
  &:hover, &:focus
    cursor: default