@mixin button(
  $bg-color,
  $border-color,
  $color,
  $hover-bg-color,
  $hover-border-color,
  $hover-color,
  $disabled-bg-color,
  $disabled-border-color,
  $disabled-color
) {
  &,
  &--disabled.button--loading,
  &:disabled.button--loading {
    background-color: $bg-color;
    border: $button-base-border-width $button-base-border-style $border-color;
    border-radius: $button-base-border-radius;
    color: $color;
    @content;
  }

  &:hover,
  &--hover,
  &:active,
  &--active {
    background-color: $hover-bg-color;
    border: 1px solid $hover-border-color;
    color: $hover-color;
  }

  &--disabled,
  &:disabled {
    background-color: $disabled-bg-color;
    border: 1px solid $disabled-border-color;
    color: $disabled-color;
  }
}

@mixin button-primary($bg-and-border-color, $hover-bg-and-border-color) {
  @include button(
    $bg-and-border-color,
    $bg-and-border-color,
    $button-primary-color,
    $hover-bg-and-border-color,
    $hover-bg-and-border-color,
    $button-primary-color,
    $button-primary-disabled-fill,
    $button-primary-disabled-fill,
    $button-primary-color
  ) {
    @content;
  }
}

@mixin button-outline(
  $bg-and-disabled-bg-color,
  $color,
  $disabled-color,
  $hover-color,
  $border-color-disabled,
  $border-color-bg-hover-color-border-hover-color: $color
) {
  @include button(
    $bg-and-disabled-bg-color,
    $border-color-bg-hover-color-border-hover-color,
    $color,
    $border-color-bg-hover-color-border-hover-color,
    $border-color-bg-hover-color-border-hover-color,
    $hover-color,
    $bg-and-disabled-bg-color,
    $border-color-disabled,
    $disabled-color
  );
}

@mixin button-inverted-outline($color) {
  @include button(
    transparent,
    $core-gray-15,
    $core-gray-15,
    $core-gray-15,
    $core-gray-15,
    $color,
    transparent,
    $core-gray-85,
    $core-gray-85
  );
}

@mixin button-no-outline(
  $color,
  $bg-and-border-color,
  $disabled-color,
  $hover-border-color: $color
) {
  @include button(
    $bg-and-border-color,
    $bg-and-border-color,
    $color,
    $bg-and-border-color,
    $hover-border-color,
    $color,
    $bg-and-border-color,
    $bg-and-border-color,
    $disabled-color
  );
}