.btn {
  @include box-shadow(none);
  display: inline-flex;
  align-items: center;

  > i:first-child:not(:only-child),
  > .icon:first-child:not(:only-child) {
    width: fit-content;
    margin-right: $spacer * .5;
  }

  > i:last-child:not(:only-child),
  > .icon:last-child:not(:only-child) {
    width: fit-content;
    margin-left: $spacer * .5;
  }
}


@each $color, $value in $theme-colors {
  .btn-link-#{$color} {
    @if $color == "action" {
      @include button-link-variant(
        $value,
        $active-background: $action-700,
      );
    }
  }
  .btn-#{$color} {
    @if $color == "secondary" {
      @include custom-button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-shade-amount),
        $hover-border: tint-color($value, $btn-hover-border-shade-amount),
        $active-background: tint-color($value, $btn-active-bg-shade-amount),
        $active-border: tint-color($value, $btn-active-border-shade-amount),
      );
    } @else {
      @include custom-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),
      );
    }
  }
  .btn-outline-#{$color} {
    @include custom-button-outline-variant($value);
  }
  .btn-icon-#{$color} {
    @if $color == "secondary" {
      @include button-icon-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-shade-amount),
        $hover-border: tint-color($value, $btn-hover-border-shade-amount),
        $active-background: tint-color($value, $btn-active-bg-shade-amount),
        $active-border: tint-color($value, $btn-active-border-shade-amount)
      );
    } @else {
      @include button-icon-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),
      );
    }
  }
  .btn-icon-outline-#{$color} {
    @include button-icon-outline-variant(
      $value,
      $value,
      $hover-background: $value,
      $hover-border: $value,
      $active-background: shade-color($value, $btn-active-bg-shade-amount),
      $active-border: shade-color($value, $btn-active-border-shade-amount),
    );
  }
}

[class*="btn-icon-"],
[class*="btn-icon-outline-"] {
  &.btn-sm {
    width: rfs-value(32px);
    height: rfs-value(32px);
    --#{$prefix}btn-padding-x: 0;
    --#{$prefix}btn-padding-y: 0;
  }

  &.btn-lg {
    width: rfs-value(48px);
    height: rfs-value(48px);
  }
}

.btn-sm {
  > i:first-child:not(:only-child),
  > .icon:first-child:not(:only-child) {
    margin-right: $spacer * .375;
  }

  > i:last-child:not(:only-child),
  > .icon:last-child:not(:only-child) {
    margin-left: $spacer * .375;
  }
}

.btn-lg {
  > i:first-child:not(:only-child),
  > .icon:first-child:not(:only-child) {
    margin-right: $spacer * .625;
  }

  > i:last-child:not(:only-child),
  > .icon:last-child:not(:only-child) {
    margin-left: $spacer * .625;
  }
}