@import compass/css3/gradient
@import compass/css3/border-radius
@import compass/css3/opacity
@import compass/css3/text-shadow
@import compass/css3/box-shadow
@import compass/css3/background-clip
@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
$fb-allow-disabled: false !default
$fb-line-height: 1.2em !default
$fb-inset: true !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, $allow-disabled: $fb-allow-disabled)
  +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")
  @if $allow-disabled
    &.disabled, &[disabled]
      +disable-fancy-button($color)
  @if $fb-inset
    +box-shadow(rgba(255,255,255, (lightness($color) - 5)/100), 0, 0, .1em, 1px, inset)
  +background-clip(padding-box)

=fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
  $fb-disable-allowed: $fb-allow-disable
  $fb-allow-disable: true
  +fancy-button-structure($font-size, $radius, $border-width)
  +fancy-button-colors-matte($color)
  $fb-allow-disable: $fb-disable-allowed

=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: $color, $active: $color, $allow-disabled : $fb-allow-disabled)
  &, &:visited
    color: $color
  &:hover, &:focus
    color: $hover
  &:active
    color: $active
  @if $allow-disabled
    &.disabled, &[disabled]
      color: $color

// Layout the button's box
=fancy-button-structure($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height)
  @extend .fancy-button-reset-base-class
  +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: $fb-line-height)
  // better padding for smaller buttons
  $v-padding: 0.3em
  $h-padding: 1em
  @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)
  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, $allow-disabled: $fb-allow-disabled)
  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

=disable-fancy-button($color: $fb-color, $opacity: 0.7)
  +fb-color($color, "default")
  +opacity($opacity)
  cursor: default !important

.fancy-button-reset-base-class
  +fb-reset