// @file
// Button styles

$button-border-radius: 0 !default;
$button-background-color: gesso-color(button, primary, background) !default;
$button-background-color-active: gesso-color(
  button,
  primary,
  background-active
) !default;
$button-background-color-disabled: gesso-color(
  button,
  disabled,
  background
) !default;
$button-background-color-hover: gesso-color(
  button,
  primary,
  background-hover
) !default;
$button-background-image: none !default;
$button-text-color: gesso-color(button, primary, text) !default;
$button-text-color-active: gesso-color(button, primary, text-active) !default;
$button-text-color-disabled: gesso-color(button, disabled, text) !default;
$button-text-color-hover: gesso-color(button, primary, text-hover) !default;
$button-text-shadow: none !default;
$button-font-size: gesso-font-size(1) !default;

@mixin button(
  $color-background: $button-background-color,
  $color-text: $button-text-color,
  $color-background-hover: $button-background-color-hover,
  $color-text-hover: $button-text-color-hover,
  $color-background-active: $button-background-color-active,
  $color-text-active: $button-text-color-active,
  $color-background-disabled: $button-background-color-disabled,
  $color-text-disabled: $button-text-color-disabled,
  $border-radius: $button-border-radius,
  $font-size: $button-font-size
) {
  background-color: $color-background;
  background-image:$button-background-image;
  border: 0;
  border-radius: $border-radius;
  color: $color-text;
  cursor: pointer;
  display: inline-block;
  font-family: gesso-font-family(condensedbook);
  font-size: gesso-font-size(1);
  font-weight: gesso-font-weight(bold);
  letter-spacing: 0.055rem;
  line-height: gesso-line-height(base);
  max-width:18.125rem;
  padding: rem(gesso-spacing(sm)) rem(gesso-spacing(md));
  text-align: center;
  text-decoration: none;
  text-shadow:$button-text-shadow;
  text-transform:uppercase;
  transition: background gesso-duration(short) gesso-easing(ease-in);
  vertical-align: top;
  white-space: normal;
  width:100%;
  &:visited {
    color: $color-text;
  }

  &:hover,
  &:focus {
    background-color: $color-background-hover;
    background-image:$button-background-image;
    color: $color-text-hover;
    text-decoration: none;
  }

  &:active {
    background-color: $color-background-active;
    background-image:$button-background-image;
    color: $color-text-active;
  }

  &[disabled] {
    background-color: $color-background-disabled;
    background-image:$button-background-image;
    color: $color-text-disabled;
    cursor: default;
    pointer-events: none;
  }
}