Button

// Button
// ––––––––––––––––––––––––––––––––––––––––––––––––––

// mixins to create buttons

// create a basic button
//
// Usage:
// @include button;
//
@mixin button {
  display: inline-block;
  box-sizing: border-box;
  padding: $button-padding-y $button-padding-x;
  overflow: visible;
  color: $button-default-font-color;
  font-weight: $button-font-weight;
  font-size: $button-font-size;
  font-family: inherit;
  line-height: $button-line-height;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  background-color: $button-default-bg-color;
  border: $button-border-width solid $button-default-border-color;
  border-radius: $button-border-radius;
  cursor: pointer;
  transition: $button-transition;
  user-select: none;
}

// button styles required to create a colored variation
//
// Usage:
// @include button-color-variation(color("white"), color("black"), color("secondary"));
//
@mixin button-color-variation($color, $background-color, $border-color) {
  color: $color;
  background-color: $background-color;
  border-color: $border-color;
}

// button hover and focus state
//
// Usage:
// @include button-hover(color("white"), color("black"), color("secondary"));
//
@mixin button-hover($color, $background-color, $border-color) {
  &:hover,
  &:focus {
    color: $color;
    background-color: $background-color;
    border-color: $border-color;
    outline: 0;
  }
}

// button size variation
//
// Usage:
// @include button-size(1rem, 1rem, 15px);
//
@mixin button-size(
  $padding-y: $button-padding-y,
  $padding-x: $button-padding-x,
  $font-size: $button-font-size) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
}