@define-mixin button-variant $color, $background-color, $border-color {
  color: $color;
  background-color: $background-color;
  border-color: $border-color;

  &:hover,
  &:focus {
    background: tint($background-color, var(--button-hover-tint-percent));
    border-color: tint($border-color, var(--button-hover-tint-percent));
    color: $color;
  }
  
  &:active {
    background: shade($background-color, var(--button-active-shade-percent));
    border-color: shade($border-color, var(--button-active-shade-percent));
    color: $color;
    outline: none;
  }

  &.is-active {
    background: shade($background-color, var(--button-active-shade-percent));
    border-color: shade($border-color, var(--button-active-shade-percent));
    color: $color;
  }

  &.is-plain {
    background: var(--button-default-fill);
    border: var(--border-base);
    color: var(--button-default-color);

    &:hover,
    &:focus {
      background: var(--color-white);
      border-color: $border-color;
      color: $background-color;
    }
    
    &:active {
      background: var(--color-white);
      border-color: shade($border-color, var(--button-active-shade-percent));
      color: shade($background-color, var(--button-active-shade-percent));
      outline: none;
    }
  }
}

@define-mixin button-size $padding-vertical, $padding-horizontal, $font-size, $border-radius {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
}