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

  &:hover,
  &:focus {
    background: color($background-color red(-18) green(+11) blue(+11));
    border-color: color($background-color red(-18) green(+11) blue(+11));
    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: color($background-color red(-18) green(+11) blue(+11));
      border-color: color($background-color red(-18) green(+11) blue(+11));
      color: var(--color-white);
    }
    
    &:active {
      background: shade($background-color, var(--button-active-shade-percent));
      border-color: shade($border-color, var(--button-active-shade-percent));
      color: var(--color-white);
      outline: none;
    }
  }
}

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