// Buttons
//
// Located in `wyrm_core/_button.sass`. You can also add font icons to any
// button as shown in the third example. Wyrm by default uses the FontAwesome
// library, but any icon set can be substituted.
//
// Markup:
// <a href="#" class="btn {$modifiers}"> Link</a>
// <button class="btn {$modifiers}"> Button</button>
// <input type="submit" class="btn {$modifiers}">
// <button class="btn fa fa-check-circle {$modifiers}"> With icon</button>
//
// :hover               - Highlight the button when hovered.
// :visited             - Visited link
// :disabled            - For disabled buttons.
// .btn-disabled        - Class version of disabled.
// :active              - Press the button down.
// :focus               - Focus
// .btn-neutral         - Neutral looking button.
// .btn-info            - For imformative, or alternate actions.
// .btn-success         - For positive actions.
// .btn-danger          - Usually used for delete actions.
// .btn-warning         - Beware, you might not want to click me.
// .btn-invert          - Dark button to contrast the background.
// .btn-link            - Unstyled, link looking button. Useful for secondary actions next to another button.
// .btn-small           - Smaller button.
//
// Styleguide 1

button
  font-size: 100%
  margin: 0
  vertical-align: baseline
  *vertical-align: middle
  cursor: pointer
  line-height: normal
  -webkit-appearance: button
  *overflow: visible
button::-moz-focus-inner, input::-moz-focus-inner
  border: 0
  padding: 0
button[disabled]
  cursor: default

.btn
  /* Structure
  display: inline-block
  border-radius: 2px
  line-height: normal
  white-space: nowrap
  text-align: center
  cursor: pointer
  font-size: 100%
  padding: $base-line-height / 4 $base-line-height / 2 ($base-line-height / 4 + 2) $base-line-height / 2
  color: $white
  border: 1px solid rgba(0,0,0,0.1)
  background-color: $button-background-color
  text-decoration: none
  font-weight: normal
  font-family: $base-font-family
  box-shadow: 0px 1px 2px -1px rgba(255, 255, 255, .5) inset, 0px -2px 0px 0px rgba(0,0,0,.1) inset
  outline-none: false
  vertical-align: middle
  *display: inline
  zoom: 1
  -webkit-user-drag: none
  +user-select(none)
  +font-smooth
  +transition(all 0.1s linear)

.btn-hover
  background: lighten($link-color, 5%)
  color: $white

.btn
  &:hover
    background: lighten($button-background-color, 5%)
    color: $white
  &:focus
    background: lighten($button-background-color, 5%)
    outline: 0
  &:active
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .05) inset, 0px 2px 0px 0px rgba(0,0,0,.1) inset
    padding: ($base-line-height / 4 + 2) $base-line-height / 2 $base-line-height / 4 $base-line-height / 2
  &:visited
    color: $white
  &:disabled
    background-image: none
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
    filter: alpha(opacity = 40)
    opacity: 0.4
    cursor: not-allowed
    box-shadow: none

.btn-disabled
  background-image: none
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
  filter: alpha(opacity = 40)
  opacity: 0.4
  cursor: not-allowed
  box-shadow: none
  &:hover, &:focus, &:active
    background-image: none
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
    filter: alpha(opacity = 40)
    opacity: 0.40
    cursor: not-allowed
    box-shadow: none

// Firefox: Get rid of the inner focus border
.btn::-moz-focus-inner
  padding: 0
  border: 0

.btn-small
  font-size: 80%

.btn-info
  background-color: $blue !important
  &:hover
    background-color: lighten($blue, 5%) !important

.btn-neutral
  background-color: $button-neutral-background-color !important
  color: $text-color !important
  &:hover
    background-color: darken($button-neutral-background-color, 5%) !important
    color: $text-color
  &:visited
    color: $text-color !important

.btn-success
  background-color: $green !important
  &:hover
    background-color: darken($green, 5%) !important

.btn-danger
  background-color: $red !important
  &:hover
    background-color: lighten($red, 5%) !important

.btn-warning
  background-color: $orange !important
  &:hover
    background-color: lighten($orange, 5%) !important
.btn-invert
  background-color: $gray-darker
  &:hover
    background-color: lighten($gray-darker, 5%) !important

.btn-link
  background-color: transparent !important
  color: $link-color
  box-shadow: none
  border-color: transparent !important
  &:hover
    background-color: transparent !important
    color: lighten($link-color, 10%) !important
    box-shadow: none
  &:active
    background-color: transparent !important
    color: lighten($link-color, 10%) !important
    box-shadow: none
  &:visited
    color: $link-color-visited

.wy-btn-group .btn, .wy-control .btn
  vertical-align: middle

.wy-btn-group
  margin-bottom: $base-line-height
  +clearfix
