@mixin x-button-outline-variant($color, $color-hover, $bg, $bg-hover, $border:$color, $border-hover:$color-hover) {
  color: $color;
  background-color: $bg;
  border-color: $border;

  @include x-hover-focus-active {
    color: $color-hover;
    background-color: $bg-hover;
    border-color: $border-hover;
  }
}

@mixin x-btn-info ($bg,$border,$color,$bg-active,$color-active) {
  background-color: $bg;
  border-color: $border;
  color: $color;

  @include x-hover-focus-active {
    --x-btn-outline-info-bg: $bg-active;
    --x-btn-outline-info-color: $color-active;
  }
}