@mixin btn-style-base {
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  border: $btn-border $btn-background-color;
  background-color: $btn-background-color;
  background-clip: border-box;
  color: $btn-font-color;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow $g-transition, background-color $g-transition, color $g-transition, border-color $g-transition;

  &:hover,
  &:focus {
    background-color: $btn-hover-background-color;
    border-color: $btn-hover-background-color;
    text-decoration: none;
  }

  &:active {
    background-color: $btn-active-background-color;
    border-color: $btn-active-background-color;
  }

  &:disabled {
    border-color: $btn-disabled-background-color !important;
    background-color: $btn-disabled-background-color !important;
    color: $btn-disabled-font-color !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: unset !important;
  }

  @content;
}

// Colored
@mixin btn-colored($background-color, $font-color: #fff) {
  $hover-background-color: lighten($background-color, 5%);
  $active-background-color: darken($background-color, 5%);

  background-color: $background-color;
  border-color: $background-color;
  color: $font-color;

  &:hover,
  &:focus {
    background-color: $hover-background-color;
    border-color: $hover-background-color;
    color: $font-color;
  }

  &:active {
    background-color: $active-background-color;
    border-color: $active-background-color;
    color: $font-color;
  }
}

@mixin btn-modifier-colored($mod-name, $background, $font-color: #fff) {
  &#{$mod-name} {
    @include btn-colored($background, $font-color);
  }
}

// Transparent
@mixin btn-transparent($color) {
  $hover-color: rgba($color, 0.2);
  $active-color: rgba(darken($color, 5%), 0.3);

  background-color: transparent;
  border-color: transparent;
  color: $color;

  &:hover,
  &:focus {
    background-color: $hover-color;
    border-color: $hover-color;
  }

  &:active {
    background-color: $active-color;
    border-color: $active-color;
  }
}

@mixin btn-modifier-transparent($mod-name, $color) {
  &#{$mod-name} {
    @include btn-transparent($color)
  }
}

// Bordered
@mixin btn-bordered($color, $hover-font-color: #fff) {
  $active-background-color: darken($color, 5%);

  background-color: transparent;
  border-color: $color;
  color: $color;

  &:hover,
  &:focus {
    background-color: $color;
    border-color: $color;
    color: $hover-font-color;
  }

  &:active {
    background-color: $active-background-color;
    border-color: $active-background-color;
    color: $hover-font-color;
  }
}

@mixin btn-modifier-bordered($mod-name, $color, $hover-font-color: #fff) {
  &#{$mod-name} {
    @include btn-bordered($color, $hover-font-color)
  }
}

// Elevated
@mixin btn-elevated() {
  @include box-elevation(3);

  &:hover,
  &:focus {
    @include box-elevation(6)
  }

  &:active {
    @include box-elevation(1);
  }
}