@mixin button-variant($color, $background, $border) {
  $generate-colors: generate-color($background);

  color: $color;
  border-color: $border;
  background-color: $background;
  background-image: linear-gradient(to top, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .06) 100%),
  linear-gradient(to top, rgba(map_get($generate-colors, 'darken'), .5) 0%,
  rgba(map_get($generate-colors, 'lighten'), .5) 100%);
  text-shadow: $btn-text-shadow;

  &:hover {
    background-image: linear-gradient(to top, rgba(map_get($generate-colors, 'darken'), .5) 0%,
    rgba(map_get($generate-colors, 'lighten'), .5) 100%);
  }
  &:active,
  &.active {
    background-image: none;
    box-shadow: $btn-active-box-shadow;
  }
}

@function generate-color($base-color) {
  @return (
  'lighten': lighten($base-color, 4),
  'base':$base-color,
  'border': desaturate(darken($base-color, 7), 11),
  'darken': desaturate(darken($base-color, 13), 7),
  );
}

@mixin button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius-base) {
  font-size: $font-size-base;
  line-height: $line-height-base;

  padding: $btn-padding-y $btn-padding-x;

  border-radius: $btn-border-radius-base;
}
