.btn-axa {
  @include button-primary($color-button-primary, $color-button-secondary, $color-white);
  @include button-animation($color-button-secondary);
  @include typo-14();
  border-width: 0;
  border-bottom-width: 2px;
  border-style: solid;

  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  &.btn.btn-lg {
    @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-lg,
      $btn-border-radius-lg);
    @include typo-14();

    border-width: 0;
    border-bottom-width: 2px;
  }

  &.btn.btn-sm {
    @include btn-split-icon($padding-small-vertical, $padding-small-horizontal,
      $font-size-sm, $line-height-sm, $btn-border-radius-sm);
    @include typo-14();
  }
}

.btn {
  @include btn-split-icon($padding-base-vertical, $padding-base-horizontal, $font-size-base,
    $line-height-base, $btn-border-radius);
  @include typo-14();
  // slight margin-bottom to prevent gluing buttons together when they break into two lines
  margin-bottom: 10px;

  &.btn-lg {
    // Reduce vertical padding by 1px because we increase border-width by 1px
    @include btn-split-icon(($padding-large-vertical - 0.06667rem), $padding-large-horizontal,
      $font-size-lg, $line-height-lg, $btn-border-radius-lg);
    @include typo-14();

    border-width: 2px;
  }

  &.btn-sm {
    @include btn-split-icon($padding-small-vertical, $padding-small-horizontal,
      $font-size-sm, $line-height-sm, $btn-border-radius-sm);
    @include typo-14();
  }

  &.btn-xs {
    @include btn-split-icon($padding-xs-vertical, $padding-xs-horizontal, $font-size-sm,
      $line-height-sm, $btn-border-radius-sm);
    @include typo-14();
  }

  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;

  .badge {
    font-size: .9em;
  }

  &:not([disabled]):not(.btn-link):not(.btn-toggle):not(.btn) > .btn-group:hover,
  &:focus,
  &.focus {
    color: $color-white;
  }

  .btn-link {
    &:disabled {
      color: $color-white;
    }
  }


}

.btn.btn-default {
  @include button-color($color-button-primary, $color-button-secondary, $color-white);
}

.btn-ghost {
  @include button-animation($color-button-secondary);
  @include btn-split-icon($padding-base-vertical, $padding-base-horizontal, $font-size-base,
    $line-height-base, $btn-border-radius);
  @include typo-14();

  @include button-color($color-button-primary, $color-button-secondary, $color-white);
  background-color: transparent;

  &.btn-lg {
    // Reduce vertical padding by 1px because we increase border-width by 1px
    @include btn-split-icon(($padding-large-vertical - 0.06667rem), $padding-large-horizontal,
      $font-size-lg, $line-height-lg, $btn-border-radius-lg);
    @include typo-14();
  }

  &.btn-sm {
    @include btn-split-icon($padding-small-vertical, $padding-small-horizontal,
      $font-size-sm, $line-height-sm, $btn-border-radius-sm);
    @include typo-14();
  }

  &.btn-ghost-white {
    @include button-color($color-white, $color-wild-sand, transparent);
    @include button-animation($color-wild-sand);

    &:hover,
    &:focus,
    &.focus {
      color: $color-scorpion;
    }

  }

  &:hover {
    .btn-icon-blue {
      color: $color-white;
    }
  }
}

.btn-icon-blue {
  color: $color-button-primary;
}

.btn-icon-arrow {

  &:hover {
    >svg {
      animation: animate-arrow-right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }
  }
}