// Base
@mixin nio-button--colorize($background, $foreground, $ghost: rgba($background, 0.5)) {
  $button-animation: unique-id();

  background-color: $background;
  color: $foreground;
  border-color: $background;

  &:focus,
  &:hover {
    background-color: lighten($background, 5%);
    transform: scale(1.03);
  }

  &:active {
    animation: $button-animation 200ms forwards;
  }

  @keyframes #{$button-animation} {
    0% {
     background-color: darken($background, 5%);
    }
    10% {
      box-shadow: 0 0 5px 2px $ghost;
      background-color: darken($background, 5%);
    }
    90% {
      box-shadow: 0 0 0 13px transparentize($ghost, 0.2);
    }
    100% {
      box-shadow: 0 0 0 18px transparent;
    }
  }
}

%nio-button {
  @include nio-button--colorize($palette-light, $palette-black);
  font-size: $font-size-medium;
  background-color: #fff;
  border: solid 1px $palette-light;
  padding: 0.25em 1em;
  min-width: 10em;
  min-height: 2.5em;
  border-radius: 2em;
  font: inherit;
  line-height: 1;
  box-shadow: 0 0.5em 1em -0.5em $palette-shadow;
  box-sizing: border-box;
  outline: 0;
  cursor: pointer;
  background-image: radial-gradient(circle 7.5em at 50% 20%, rgba(white, 0.125), rgba(white, 0));
}

%nio-button--link {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  line-height: 1.9em;
}

%nio-button--disabled {
  cursor: default;
  border: 1px solid $palette-light;
  background-color: rgba($palette-light, 0.1);
  color: $palette-light;
  box-shadow: none;
  cursor: not-allowed;
  &:focus,
  &:hover {
    background-color: rgba($palette-light, 0.1);
    transform: none;
  }
  &:active {
    animation: none;
  }
}

// Variants
%nio-button--primary {
  @include nio-button--colorize($palette-primary, $palette-white);
}

%nio-button--alternate {
  @include nio-button--colorize($palette-alternate, $palette-white);
}

%nio-button--affirmative {
  @include nio-button--colorize($palette-affirmative, $palette-white);
}

%nio-button--warning {
  @include nio-button--colorize($palette-warning, $palette-white);
}

%nio-button--danger {
  @include nio-button--colorize($palette-danger, $palette-white);
}

%nio-button--huge {
  font-size: $font-size-big;
}

%nio-button--large {
  font-size: $font-size-large;
}

%nio-button--small {
  font-size: $font-size-small;
}

%nio-button--tiny {
  font-size: $font-size-tiny;
}