// define some global button styles.
.button {
  font-size: 1em;
  border-radius: 0.3em;
  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4));
  padding: 0.3em 0.7em 0.4em;
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  &:active {
    padding: 0.4em 0.7em 0.3em;
    @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4));
  }
}

// extend global style and add color information.
@mixin button($color) {
  border: {
    style: solid;
    width: 1px;
    color: darken($color, 10%) darken($color, 25%) darken($color, 40%);
  };
  background: $color;
  @include linear-gradient(lighten($color, 10%), darken($color, 10%));
  &:hover, &:focus {
    @include linear-gradient(lighten($color, 15%), darken($color, 5%));
  }
  &:active {
    @include linear-gradient($color, darken($color, 10%));
  }
  @extend .button;
}