// ===========================================================================
// BUTTONS



$button-background-color:        $hopbush !default;
$button-background-hover-color:  $bouquet !default;
$button-background-active-color: $venus   !default;
$button-text-color:              $white   !default;



.button {
  @extend  %caps;
  padding: 0 1em;
  @include tappable;
  border: 0;
  @include border-radius(.25em);
  width: 100%;
  text-align: center;
  vertical-align: middle;
  background: $button-background-color;
  @include box-shadow-both;
  @include link($button-text-color, $button-text-color, $button-text-color);
  @include text-shadow-dark;

  #{$hover} { background: $button-background-hover-color;  }
  &:active  { background: $button-background-active-color; }
}