// -------
// Buttons
// -------

// Function: highlight
//
// Adds a light brighter line across the top of the element for a perspective
// effect. Takes an optional argument for strength, which takes a value between
// 0 and 1.
//
// ex. highlight()
// ex. highlight: .7

-highlight($strength = .3)
  box-shadow: s("inset 0 1px 0 %s", rgba(255,255,255,$strength))

// Function: parse
// Used internally for setting button sizes.

-parse($size)
  if $size == "small"
    return 10
  else if $size == "medium"
    return 13
  else if $size == "large"
    return 18
  else
    return $size

// Mixin: Button
//
// Creates a very basic looking button style. Three optional params:
// - color: Takes any color, defaults to the default global color
// - size: Takes 'small', 'medium', 'large', or an integer. The numbers reflect
//   the font size for the text inside the button, but scales all other aspects
//   as well (corners, padding, etc).
// - $text-color: Takes any color for the button text, defaults to trying to
//   detect whether the background is dark or light and setting the opposite.
//
// ex. button()
// ex. button: blue
// ex. button: #D4513B
// ex. button: green large
// ex. button: #4C82D4 24

button($color = $default-color, $size = "medium", $text-color = null)

  // color detection and changes
  $text-color = (light(darken($color, 22%)) ? rgba(#000, .7) : #fff) unless $text-color
  $parsed-size = -parse($size)

  // now that we've got numbers, let's work some proportions
  $height = round(($parsed-size * 1.53px) / 2)
  $width = round((($parsed-size * 1.53px) * 2.2) / 2)

  // dynamically calculated styles
  font-size: unit($parsed-size, 'px')
  padding: unit($height, 'px') unit($width, 'px')
  border-radius: round($parsed-size / 4.33333px)
  background-color: $color
  color: $text-color

  // constant styles
  cursor: pointer
  font-weight: bold
  font-family: $font-stack
  line-height: 1em
  text-align: center
  text-decoration: none
  display: inline-block
  border: none
  no-select()

  &:hover, &:focus
    background-color: darken($color, 5%)
    color: darken($text-color, 3%)
    border: none

  &:active
    background-color: darken($color, 10%)

// Mixin: Glossy Button
//
// Creates a more fancy looking button style. Five optional params:
// - color: Takes any color, defaults to the default global color
// - size: Takes 'small', 'medium', 'large', or an integer. The numbers reflects
//   the font size for the text inside the button, but scales all other aspects
//   as well.
// - $text-color: Takes any color for the button text, defaults to trying to
//   detect whether the background is dark or light and setting the opposite.
// - $shadow-color: Color for the text shadow, default is the contrast detection
//   described above.
// - $hover-color: Color of the text shadow when hovered. Default is contrast
//   detection as described above. You probably don't need to use this.
//
// ex. glossy-button()
// ex. glossy-button: blue
// ex. glossy-button: #D4513B
// ex. glossy-button: green large
// ex. glossy-button: #4C82D4 24

glossy-button($color = $default-color, $size = "medium", $text-color = null, $shadow-color = null, $hover-color = null)

  // color detection and changes
  if $text-color
    $dark-text = light($text-color) ? true : false
  else
    $dark-text = light(darken($color, 22%)) ? false : true
    $text-color = $dark-text ? white : rgba(#000, .7)

  $shadow-color = $dark-text ? rgba(#000,.1) : rgba(#fff,.3) unless $shadow-color
  $hover-color = $dark-text ? rgba(#000,.2) : rgba(#fff,.5) unless $hover-color
  $down-shadow = $dark-text ? 0 -1px 1px rgba(#000,.2) : 1px 1px 1px rgba(#fff,.6)

  // parse words, make sure it's a number
  $parsed-size = -parse($size)

  // now that we've got numbers, let's work some proportions
  $height = round(($parsed-size*1.53px)/2)
  $width = round((($parsed-size*1.53px)*2.2)/2)

  // dynamically calculated styles
  font-size: unit($parsed-size, 'px')
  padding: unit($height, 'px') unit($width, 'px')
  border-radius: round($parsed-size/4.33333px)
  gradient($color)
  text-shadow: 1px 1px 1px $shadow-color
  border: s('1px solid %s', darken($color, 10%))
  color: $text-color

  // constant styles
  -highlight()
  cursor: pointer
  font-weight: bold
  font-family: $font-stack
  line-height: 1em
  text-align: center
  text-decoration: none
  display: inline-block
  no-select()

  &:hover, &:focus
    background-position: 0 unit($height * -1, 'px')
    color: darken($text-color, 3%)
    text-shadow: 1px 1px 1px $hover-color

  &:active
    box-shadow: s("inset 0 1px %s %s", $parsed-size/2.6px, rgba(darken($color, 25%),.6))
    text-shadow: $down-shadow
    border-color: darken($color, 18%)

// Mixin: Button Disabled
//
// Add this mixin to a button and it will make the button appear to be disabled.
// Try attaching to a class like .disabled and adding that class to the button.
// Takes no arguments.
//
// ex. .disabled
//       button-disabled()

button-disabled()
  background: #ccc
  border-color: darken(#ccc, 10%)
  opacity: .5
  cursor: default
  no-select()

  &:hover
    background: #ccc
    background-position: 0 0

  &:active
    background: #ccc
    box-shadow: none
    border-color: darken(#ccc, 10%)
    text-shadow: 1px 1px 1px rgba(#000,.1)

// Additive Mixin: Buttons
//
// WARNING: Creates classes in your css and styles them - not to be used inside
// an element.
//
// This mixin makes it such that you can use classes to define buttons on your
// page.
// - .btn: creates a simple button
// - .btn-fancy: creates a fancy button
// - .disabled: disables an existing button (will only work on .btn and
//   .btn-simple)

buttons()
  .btn
    transition()
    button()
  .btn-fancy
    transition()
    glossy-button()
  .btn.disabled, .btn-simple.disabled
    button-disabled()