=button-states($color)
  background-color: $color
  &:hover,
  &:focus
    background-color: scale-color($color, $lightness: 20%)
  &:active,
  &.active
    background-color: scale-color($color, $lightness: -15%)

// Buttons -----------------------
.btn
  border: none
  background: $base
  color: $inverse
  font-size: 16.5px
  text-decoration: none
  text-shadow: none
  +box-shadow(none)
  +transition(.25s)

  &:hover,
  &:focus
    background-color: scale-color($base, $lightness: 20%)
    color: $inverse
    +transition(.25s)

  &:active,
  &.active
    background-color: scale-color($base, $lightness: -15%)
    color: rgba($inverse, .75)
    +box-shadow(none)

  &.disabled,
  &[disabled]
    background-color: $gray
    color: $inverse

  // Sizes -----------------------
  &.btn-large
    padding-bottom: 12px
    padding-top: 13px

  // Colors -----------------------
  &.btn-primary
    +button-states($firm)

  &.btn-info
    +button-states($info)

  &.btn-danger
    +button-states($danger)

  &.btn-success
    +button-states($success)

  &.btn-warning
    +button-states($warning)

  // Button with icon inside
  .btn-toolbar &
    font-size: 18px
    padding: 10px 14px 9px

    &:first-child
      +border-radius(6px 0 0 6px)

    &:last-child
      +border-radius(0 6px 6px 0)

.btn-toolbar
  .btn.active
    color: $inverse