@mixin color-variant($color, $background-color, $border-color) {
  color: $color;
  background-color: $background-color;
  border-color: $border-color;
}

@mixin size-variant($padding-vertical, $padding-horizontal, $font-size) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}

$large-height: 36px !default;
$regular-height: 32px !default;
$small-height: 28px !default;
$mini-height: 24px !default;

$mini-padding-horizontal: 8px !default;
$mini-font-size: 12px !default;

$small-padding-horizontal: 16px !default;
$small-font-size: 12px !default;

$regular-padding-horizontal: 16px !default;
$regular-font-size: 14px !default;

$large-padding-horizontal: 16px !default;
$large-font-size: 14px !default;

$gutter: 12px !default;
$gutter-icon: 8px !default;