@mixin btn-base {
  @include no-decoration;
  line-height: $button-line-height;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  user-select: none;
}

@mixin reset-btn {
  background-color: transparent;
  text-align: inherit;
  border: 0;
  cursor: pointer;
  user-select: none;
}

@mixin btn-color($bg-color, $color: $button-color) {
  @if $auto-button-color-enable {
    $color: get-contrast($bg-color);
  }

  color: $color;
  @include gradient-bg($bg-color);
  outline-color: $bg-color;
  @include box-shadow($button-box-shadow);
  @include transition(
    background-color $transition-duration $transition-timing-function,
    box-shadow $transition-duration $transition-timing-function
  );

  &:link,
  &:visited {
    color: $color;
  }

  &:focus:not([disabled]),
  &:hover:not([disabled]) {
    color: $color;
    @include gradient-bg(lighten($bg-color, 4%));
    @include box-shadow($button-hover-box-shadow);
  }

  &:active:not([disabled]) {
    color: $color;
    @include gradient-bg(darken($bg-color, 4%), $bg-color, 180deg);
    @include box-shadow($button-active-box-shadow);
  }
}

@mixin btn-flat-color($color) {
  color: $color;
  background-color: transparent;
  outline-color: rgba($color, .2);
  @include transition(
    color $transition-duration $transition-timing-function,
    background-color $transition-duration $transition-timing-function
  );

  &:focus:not([disabled]),
  &:hover:not([disabled]) {
    color: $color;
    background-color: rgba($color, .1);
  }

  &:active:not([disabled]) {
    color: $color;
    background-color: rgba($color, .2);
  }
}