@use "sass:string";
@use "../../variables/index" as *;
// Test change to verify auto-converter works
// Button variants
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($el) {
  color: string.unquote('var(--#{$el}-color-default)');
  background-color: string.unquote('var(--#{$el}-background-default)');
  border-color: string.unquote('var(--#{$el}-border-color-default)');
  &:focus,
  &.focus {
    color: string.unquote('var(--#{$el}-color-focus)');
    background-color: string.unquote('var(--#{$el}-background-focus)');
    border-color: string.unquote('var(--#{$el}-border-color-focus)');
    box-shadow: inset 0 0 0 1px string.unquote('var(--#{$el}-border-color-focus)');
  }
  &:hover {
    color: string.unquote('var(--#{$el}-color-hover)');
    background-color: string.unquote('var(--#{$el}-background-hover)');
    border-color: string.unquote('var(--#{$el}-border-color-hover)');
    box-shadow: inset 0 0 0 1px string.unquote('var(--#{$el}-border-color-hover)');
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: string.unquote('var(--#{$el}-color-active)');
    background-color: string.unquote('var(--#{$el}-background-active)');
    border-color: string.unquote('var(--#{$el}-border-color-active)');
    box-shadow: inset 0 0 0 1px string.unquote('var(--#{$el}-border-color-active)');
    background-image: none;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      color: string.unquote('var(--#{$el}-color-default)');
      background-color: string.unquote('var(--#{$el}-background-default)');
      border-color: string.unquote('var(--#{$el}-border-color-default)');
    }
  }
  .badge {
    border-width: 1px;
    border-style: solid;
    border-color: $palette-high;
  }
}

// Button sizes
@mixin button-size($padding-vertical,
$padding-horizontal,
$font-size,
$line-height,
$border-radius, $height) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
  height: $height;
}