Button generator #mixin

_buttons.scss

// Button generator.
//
// Usage:
// @include button-variant(TEXT COLOR, BACKGROUND COLOR, BORDER COLOR);
// @include button-variant(TEXT COLOR, BACKGROUND COLOR);
%btn {
  margin: 0 .5em;
  transition: background-color ease .2s;
}

@mixin button-variant($color, $background, $border: null) {
  @extend %btn;
  background-color: $background;
  color: $color;
  @if ($border) {
    border-color: $border;
  }

  &:focus {
    background-color: darken($background, 10%);
    color: $color;
    @if ($border) {
      border-color: darken($border, 25%);
    }
  }

  &:hover {
    background-color: darken($background, 10%);
    color: $color;
    @if ($border) {
      border-color: darken($border, 12%);
    }
  }

  &:active {
    background-color: darken($background, 10%);
    color: $color;
    @if ($border) {
      border-color: darken($border, 12%);
    }

    &:hover,
    &:focus {
      background-color: darken($background, 17%);
      color: $color;
      @if ($border) {
        border-color: darken($border, 25%);
      }
    }
  }

  &[disabled] {
    &:hover,
    &:focus {
      background-color: $background;
      @if ($border) {
        border-color: $border;
      }
    }
  }
}