.btn {
  .feather {
    width: 14px;
    height: 14px;
  }
}

.btn-group .btn,
.btn-group-vertical .btn,
.input-group .btn {
  &:hover,
  &:focus {
    transform: none;
  }
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else if $color == "primary" {
      @include button-variant(
        $value,
        $value,
        $color: $white,
        $hover-color: $white,
        $disabled-color: $white
      );
    } @else {
      @include button-variant(
        $value,
        $value,
        $color: $white,
        $disabled-color: $white,
        $hover-color: $white,
        $active-color: $white
      );
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @if $color == "dark" {
      @include button-outline-variant($value);
    } @else if $color == "light" {
      @include button-outline-variant($value);
    } @else {
      @include button-outline-variant(
        $value,
        $color-hover: $white,
        $active-color: $white
      );
    }
  }
}

//
// Social Colors

@each $color, $value in $social-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

//
// outline socials

@each $color, $value in $social-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

// LIGHT

@each $color, $value in $theme-colors {
  .btn-light-#{$color} {
    @include button-variant(
      $background: tint-color($value, 80%),
      $border: tint-color($value, 80%),
      $color: shade-color($value, 80%),
      $disabled-color: shade-color($value, 80%),
      $hover-color: shade-color($value, 80%),
      $active-background: shade-color($value, 80%)
    );
  }

  @if $enable-dark-mode {
    @include color-mode(dark) {
      .btn-light-#{$color} {
        @include button-variant(
          $background: shade-color($value, 80%),
          $border: shade-color($value, 80%),
          $color: tint-color($value, 40%),
          $disabled-color: shade-color($value, 50%),
          $hover-background: shade-color($value, 50%),
          $hover-color: tint-color($value, 40%),
          $active-background: shade-color($value, 50%),
          $active-color: tint-color($value, 40%)
        );
      }
    }
  }
}

.btn-check:checked + .btn {
  color: #fff;
}

.btn-close {
  cursor: pointer;
}
