//======================================================================
// Button
//======================================================================

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

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

  color: $color;
  background-color: $bg-color;
  outline-color: $bg-color;
  transition: background-color $transition-time, box-shadow $transition-time;

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

  &:focus:not([disabled]),
  &:hover:not([disabled]) {
    color: $color;
    background-color: lighten($bg-color, 4%);
    box-shadow: $shadow-normal;
  }

  &:active:not([disabled]) {
    color: $color;
    background-color: darken($bg-color, 4%);
    box-shadow: $shadow-near;
  }
}

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

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

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