$button-border-radius-large: var(
  --wds-button-border-radius-large,
  var(--wds-border-radius-400)
);
$button-border-radius-medium: var(
  --wds-button-border-radius-medium,
  var(--wds-border-radius-400)
);
$button-border-radius-small: var(
  --wds-button-border-radius-small,
  var(--wds-border-radius-300)
);
$button-border-radius-tiny: var(
  --wds-button-border-radius-tiny,
  var(--wds-border-radius-300)
);
$button-size-large: var(--wds-button-size-large, var(--wds-space-1150));
$button-size-medium: var(--wds-button-size-medium, var(--wds-space-950));
$button-size-small: var(--wds-button-size-small, var(--wds-space-750));
$button-size-tiny: var(--wds-button-size-tiny, var(--wds-space-600));
$border-dark-secondary: var(
  --wds-icon-button-color-border-dark-secondary,
  var(--wds-color-border-dark-primary)
);
$border-dark-secondary-disabled: var(
  --wds-icon-button-color-border-dark-secondary-disabled,
  var(--wds-color-black-700)
);
$border-light-secondary: var(
  --wds-icon-button-color-border-light-secondary,
  var(--wds-color-border-light)
);
$border-light-secondary-active: var(
  --wds-icon-button-color-border-light-secondary-active,
  var(--wds-color-border-light-active)
);
$border-light-secondary-disabled: var(
  --wds-icon-button-color-border-light-secondary-disabled,
  var(--wds-color-black-700)
);
$border-light-secondary-hover: var(
  --wds-icon-button-color-border-light-secondary-hover,
  var(--wds-color-border-light-hover)
);
$border-premium-secondary: var(
  --wds-icon-button-color-border-premium-secondary,
  var(--wds-color-border-premium-primary)
);
$border-premium-secondary-active: var(
  --wds-icon-button-color-border-premium-secondary-active,
  var(--wds-color-border-premium-tertiary-active)
);
$border-premium-secondary-disabled: var(
  --wds-icon-button-color-border-premium-secondary-disabled,
  var(--wds-color-black-700)
);
$border-standard-secondary: var(
  --wds-icon-button-color-border-standard-secondary,
  var(--wds-color-border-standard-primary)
);
$border-standard-secondary-active: var(
  --wds-icon-button-color-border-standard-secondary-active,
  var(--wds-color-border-standard-tertiary-active)
);
$border-standard-secondary-disabled: var(
  --wds-icon-button-color-border-standard-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-dark-primary: var(
  --wds-icon-button-color-fill-dark-primary,
  var(--wds-color-fill-dark-primary)
);
$fill-dark-primary-active: var(
  --wds-icon-button-color-fill-dark-primary-active,
  var(--wds-color-fill-dark-primary-active)
);
$fill-dark-primary-disabled: var(
  --wds-icon-button-color-fill-dark-primary-disabled,
  var(--wds-color-black-700)
);
$fill-dark-primary-hover: var(
  --wds-icon-button-color-fill-dark-primary-hover,
  var(--wds-color-fill-dark-primary-hover)
);
$fill-dark-secondary: var(
  --wds-icon-button-color-fill-dark-secondary,
  var(--wds-color-white-transparent-0)
);
$fill-dark-secondary-active: var(
  --wds-icon-button-color-fill-dark-secondary-active,
  var(--wds-color-fill-dark-tertiary-active)
);
$fill-dark-secondary-disabled: var(
  --wds-icon-button-color-fill-dark-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-dark-secondary-hover: var(
  --wds-icon-button-color-fill-dark-secondary-hover,
  var(--wds-color-fill-dark-tertiary-hover)
);
$fill-dark-tertiary: var(
  --wds-icon-button-color-fill-dark-tertiary,
  var(--wds-color-fill-light-secondary)
);
$fill-dark-tertiary-active: var(
  --wds-icon-button-color-fill-dark-tertiary-active,
  var(--wds-color-fill-dark-tertiary-active)
);
$fill-dark-tertiary-disabled: var(
  --wds-icon-button-color-fill-dark-tertiary-disabled,
  var(--wds-color-fill-light-secondary)
);
$fill-dark-tertiary-hover: var(
  --wds-icon-button-color-fill-dark-tertiary-hover,
  var(--wds-color-black-600)
);
$fill-light-primary: var(
  --wds-icon-button-color-fill-light-primary,
  var(--wds-color-fill-light-primary)
);
$fill-light-primary-active: var(
  --wds-icon-button-color-fill-light-primary-active,
  var(--wds-color-fill-light-primary-active)
);
$fill-light-primary-disabled: var(
  --wds-icon-button-color-fill-light-primary-disabled,
  var(--wds-color-black-700)
);
$fill-light-primary-hover: var(
  --wds-icon-button-color-fill-light-primary-hover,
  var(--wds-color-fill-light-primary-hover)
);
$fill-light-secondary: var(
  --wds-icon-button-color-fill-light-secondary,
  var(--wds-color-fill-light-secondary)
);
$fill-light-secondary-active: var(
  --wds-icon-button-color-fill-light-secondary-active,
  var(--wds-color-fill-light-secondary-active)
);
$fill-light-secondary-disabled: var(
  --wds-icon-button-color-fill-light-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-light-secondary-hover: var(
  --wds-icon-button-color-fill-light-secondary-hover,
  var(--wds-color-fill-light-secondary-hover)
);
$fill-light-tertiary: var(
  --wds-icon-button-color-fill-light-tertiary,
  var(--wds-color-fill-light-secondary)
);
$fill-light-tertiary-active: var(
  --wds-icon-button-color-fill-light-tertiary-active,
  var(--wds-color-fill-light-secondary-active)
);
$fill-light-tertiary-disabled: var(
  --wds-icon-button-color-fill-light-tertiary-disabled,
  var(--wds-color-fill-light-secondary)
);
$fill-light-tertiary-hover: var(
  --wds-icon-button-color-fill-light-tertiary-hover,
  var(--wds-color-fill-light-secondary-hover)
);
$fill-premium-primary: var(
  --wds-icon-button-color-fill-premium-primary,
  var(--wds-color-fill-premium-primary)
);
$fill-premium-primary-active: var(
  --wds-icon-button-color-fill-premium-primary-active,
  var(--wds-color-fill-premium-primary-active)
);
$fill-premium-primary-disabled: var(
  --wds-icon-button-color-fill-premium-primary-disabled,
  var(--wds-color-black-700)
);
$fill-premium-primary-hover: var(
  --wds-icon-button-color-fill-premium-primary-hover,
  var(--wds-color-fill-premium-primary-hover)
);
$fill-premium-secondary: var(
  --wds-icon-button-color-fill-premium-secondary,
  var(--wds-color-fill-premium-tertiary)
);
$fill-premium-secondary-active: var(
  --wds-icon-button-color-fill-premium-secondary-active,
  var(--wds-color-fill-premium-tertiary-active)
);
$fill-premium-secondary-disabled: var(
  --wds-icon-button-color-fill-premium-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-premium-secondary-hover: var(
  --wds-icon-button-color-fill-premium-secondary-hover,
  var(--wds-color-fill-premium-tertiary-hover)
);
$fill-premium-tertiary: var(
  --wds-icon-button-color-fill-premium-tertiary,
  var(--wds-color-fill-premium-secondary)
);
$fill-premium-tertiary-active: var(
  --wds-icon-button-color-fill-premium-tertiary-active,
  var(--wds-color-fill-premium-secondary-active)
);
$fill-premium-tertiary-disabled: var(
  --wds-icon-button-color-fill-premium-tertiary-disabled,
  var(--wds-color-fill-premium-secondary-disabled)
);
$fill-premium-tertiary-hover: var(
  --wds-icon-button-color-fill-premium-tertiary-hover,
  var(--wds-color-fill-premium-secondary-hover)
);
$fill-standard-primary: var(
  --wds-icon-button-color-fill-standard-primary,
  var(--wds-color-fill-standard-primary)
);
$fill-standard-primary-disabled: var(
  --wds-icon-button-color-fill-standard-primary-disabled,
  var(--wds-color-black-700)
);
$fill-standard-secondary: var(
  --wds-icon-button-color-fill-standard-secondary,
  var(--wds-color-fill-standard-tertiary)
);
$fill-standard-secondary-active: var(
  --wds-icon-button-color-fill-standard-secondary-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$fill-standard-secondary-disabled: var(
  --wds-icon-button-color-fill-standard-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-standard-secondary-hover: var(
  --wds-icon-button-color-fill-standard-secondary-hover,
  var(--wds-color-fill-standard-tertiary-hover)
);
$fill-standard-tertiary: var(
  --wds-icon-button-color-fill-standard-tertiary,
  var(--wds-color-fill-light-secondary)
);
$fill-standard-tertiary-active: var(
  --wds-icon-button-color-fill-standard-tertiary-active,
  var(--wds-color-fill-light-secondary-active)
);
$fill-standard-tertiary-disabled: var(
  --wds-icon-button-color-fill-standard-tertiary-disabled,
  var(--wds-color-fill-light-secondary)
);
$fill-standard-tertiary-hover: var(
  --wds-icon-button-color-fill-standard-tertiary-hover,
  var(--wds-color-fill-light-secondary-hover)
);
$text-dark-primary: var(
  --wds-icon-button-color-text-dark-primary,
  var(--wds-color-text-standard-primary-light)
);
$text-dark-primary-active: var(
  --wds-icon-button-color-text-dark-primary-active,
  var(--wds-color-text-standard-primary-light)
);
$text-dark-primary-disabled: var(
  --wds-icon-button-color-text-dark-primary-disabled,
  var(--wds-color-black-500)
);
$text-dark-primary-hover: var(
  --wds-icon-button-color-text-dark-primary-hover,
  var(--wds-color-text-standard-primary-light)
);
$text-dark-secondary: var(
  --wds-icon-button-color-text-dark-secondary,
  var(--wds-color-text-standard-primary)
);
$text-dark-secondary-active: var(
  --wds-icon-button-color-text-dark-secondary-active,
  var(--wds-color-text-standard-primary)
);
$text-dark-secondary-disabled: var(
  --wds-icon-button-color-text-dark-secondary-disabled,
  var(--wds-color-black-500)
);
$text-dark-secondary-hover: var(
  --wds-icon-button-color-text-dark-secondary-hover,
  var(--wds-color-text-standard-primary)
);
$text-dark-tertiary: var(
  --wds-icon-button-color-text-dark-tertiary,
  var(--wds-color-text-standard-primary)
);
$text-dark-tertiary-active: var(
  --wds-icon-button-color-text-dark-tertiary-active,
  var(--wds-color-text-standard-primary)
);
$text-dark-tertiary-disabled: var(
  --wds-icon-button-color-text-dark-tertiary-disabled,
  var(--wds-color-black-500)
);
$text-dark-tertiary-hover: var(
  --wds-icon-button-color-text-dark-tertiary-hover,
  var(--wds-color-text-standard-primary)
);
$text-light-primary: var(
  --wds-icon-button-color-text-light-primary,
  var(--wds-color-fill-standard-primary)
);
$text-light-primary-active: var(
  --wds-icon-button-color-text-light-primary-active,
  var(--wds-color-fill-standard-primary-active)
);
$text-light-primary-disabled: var(
  --wds-icon-button-color-text-light-primary-disabled,
  var(--wds-color-black-500)
);
$text-light-primary-hover: var(
  --wds-icon-button-color-text-light-primary-hover,
  var(--wds-color-fill-standard-primary-active)
);
$text-light-secondary: var(
  --wds-icon-button-color-text-light-secondary,
  var(--wds-color-text-standard-primary-light)
);
$text-light-secondary-active: var(
  --wds-icon-button-color-text-light-secondary-active,
  var(--wds-color-fill-standard-primary-active)
);
$text-light-secondary-disabled: var(
  --wds-icon-button-color-text-light-secondary-disabled,
  var(--wds-color-black-500)
);
$text-light-secondary-hover: var(
  --wds-icon-button-color-text-light-secondary-hover,
  var(--wds-color-fill-standard-primary-active)
);
$text-light-tertiary: var(
  --wds-icon-button-color-text-light-tertiary,
  var(--wds-color-text-standard-primary-light)
);
$text-light-tertiary-active: var(
  --wds-icon-button-color-text-light-tertiary-active,
  var(--wds-color-fill-standard-primary-active)
);
$text-light-tertiary-disabled: var(
  --wds-icon-button-color-text-light-tertiary-disabled,
  var(--wds-color-text-disabled-light)
);
$text-light-tertiary-hover: var(
  --wds-icon-button-color-text-light-tertiary-hover,
  var(--wds-color-fill-standard-primary-active)
);
$text-premium-primary: var(
  --wds-icon-button-color-text-premium-primary,
  var(--wds-color-text-standard-primary-light)
);
$text-premium-primary-active: var(
  --wds-icon-button-color-text-premium-primary-active,
  var(--wds-color-text-standard-primary-light)
);
$text-premium-primary-disabled: var(
  --wds-icon-button-color-text-premium-primary-disabled,
  var(--wds-color-black-500)
);
$text-premium-primary-hover: var(
  --wds-icon-button-color-text-premium-primary-hover,
  var(--wds-color-text-standard-primary-light)
);
$text-premium-secondary: var(
  --wds-icon-button-color-text-premium-secondary,
  var(--wds-color-fill-premium-primary)
);
$text-premium-secondary-active: var(
  --wds-icon-button-color-text-premium-secondary-active,
  var(--wds-color-fill-premium-primary-active)
);
$text-premium-secondary-disabled: var(
  --wds-icon-button-color-text-premium-secondary-disabled,
  var(--wds-color-black-500)
);
$text-premium-secondary-hover: var(
  --wds-icon-button-color-text-premium-secondary-hover,
  var(--wds-color-fill-premium-primary-active)
);
$text-premium-tertiary: var(
  --wds-icon-button-color-text-premium-tertiary,
  var(--wds-color-text-premium)
);
$text-premium-tertiary-active: var(
  --wds-icon-button-color-text-premium-tertiary-active,
  var(--wds-color-fill-premium-primary-active)
);
$text-premium-tertiary-disabled: var(
  --wds-icon-button-color-text-premium-tertiary-disabled,
  var(--wds-color-black-500)
);
$text-premium-tertiary-hover: var(
  --wds-icon-button-color-text-premium-tertiary-hover,
  var(--wds-color-fill-premium-primary-active)
);
$text-standard-primary-disabled: var(
  --wds-icon-button-color-text-standard-primary-disabled,
  var(--wds-color-black-500)
);
$text-standard-secondary: var(
  --wds-icon-button-color-text-standard-secondary,
  var(--wds-color-text-primary)
);
$text-standard-secondary-active: var(
  --wds-icon-button-color-text-standard-secondary-active,
  var(--wds-color-fill-standard-primary-active)
);
$text-standard-secondary-disabled: var(
  --wds-icon-button-color-text-standard-secondary-disabled,
  var(--wds-color-black-500)
);
$text-standard-secondary-hover: var(
  --wds-icon-button-color-text-standard-secondary-hover,
  var(--wds-color-fill-standard-primary-active)
);
$text-standard-tertiary: var(
  --wds-icon-button-color-text-standard-tertiary,
  var(--wds-color-text-primary)
);
$text-standard-tertiary-active: var(
  --wds-icon-button-color-text-standard-tertiary-active,
  var(--wds-color-fill-standard-primary-active)
);
$text-standard-tertiary-disabled: var(
  --wds-icon-button-color-text-standard-tertiary-disabled,
  var(--wds-color-black-500)
);
$text-standard-tertiary-hover: var(
  --wds-icon-button-color-text-standard-tertiary-hover,
  var(--wds-color-fill-standard-primary-active)
);


$border-ai-primary: var(
  --wds-icon-button-color-border-ai-primary,
  var(--wds-color-fill-standard-primary)
);
$border-ai-primary-active: var(
  --wds-icon-button-color-border-ai-primary-active,
  var(--wds-color-fill-standard-primary-active)
);
$border-ai-primary-hover: var(
  --wds-icon-button-color-border-ai-primary-hover,
  var(--wds-color-fill-standard-primary-hover)
);
$border-ai-secondary: var(
  --wds-icon-button-color-border-ai-secondary,
  var(--wds-color-border-standard-primary)
);
$border-ai-secondary-active: var(
  --wds-icon-button-color-border-ai-secondary-active,
  var(--wds-color-border-standard-tertiary-active)
);
$border-ai-secondary-disabled: var(
  --wds-icon-button-color-border-ai-secondary-disabled,
  var(--wds-color-black-700)
);
$border-ai-secondary-hover: var(
  --wds-icon-button-color-border-ai-secondary-hover,
  var(--wds-color-border-standard-secondary-hover)
);
$border-ai-secondary-ring-display: var(
  --wds-icon-button-border-ai-secondary-ring-display,
  none
);
$border-ai-width: var(
  --wds-icon-button-border-ai-width,
  var(--wds-border-width-100)
);
$fill-ai-primary: var(
  --wds-icon-button-color-fill-ai-primary,
  var(--wds-color-fill-standard-primary)
);
$fill-ai-primary-active: var(
  --wds-icon-button-color-fill-ai-primary-active,
  var(--wds-color-fill-standard-primary-active)
);
$fill-ai-primary-disabled: var(
  --wds-icon-button-color-fill-ai-primary-disabled,
  var(--wds-color-black-700)
);
$fill-ai-primary-hover: var(
  --wds-icon-button-color-fill-ai-primary-hover,
  var(--wds-color-fill-standard-primary-hover)
);
$fill-ai-secondary: var(
  --wds-icon-button-color-fill-ai-secondary,
  var(--wds-color-fill-standard-tertiary)
);
$fill-ai-secondary-active: var(
  --wds-icon-button-color-fill-ai-secondary-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$fill-ai-secondary-disabled: var(
  --wds-icon-button-color-fill-ai-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-ai-secondary-hover: var(
  --wds-icon-button-color-fill-ai-secondary-hover,
  var(--wds-color-fill-standard-tertiary-hover)
);
$fill-ai-tertiary: var(
  --wds-icon-button-color-fill-ai-tertiary,
  var(--wds-color-fill-light-secondary)
);
$fill-ai-tertiary-active: var(
  --wds-icon-button-color-fill-ai-tertiary-active,
  var(--wds-color-fill-light-secondary-active)
);
$fill-ai-tertiary-disabled: var(
  --wds-icon-button-color-fill-ai-tertiary-disabled,
  var(--wds-color-fill-light-secondary)
);
$fill-ai-tertiary-hover: var(
  --wds-icon-button-color-fill-ai-tertiary-hover,
  var(--wds-color-fill-light-secondary-hover)
);
$text-ai-primary: var(
  --wds-icon-button-color-text-ai-primary,
  var(--wds-color-text-standard-primary-light)
);
$text-ai-primary-disabled: var(
  --wds-icon-button-color-text-ai-primary-disabled,
  var(--wds-color-black-500)
);
$text-ai-secondary: var(
  --wds-icon-button-color-text-ai-secondary,
  var(--wds-color-text-primary)
);
$text-ai-secondary-active: var(
  --wds-icon-button-color-text-ai-secondary-active,
  var(--wds-color-fill-standard-primary-active)
);
$text-ai-secondary-disabled: var(
  --wds-icon-button-color-text-ai-secondary-disabled,
  var(--wds-color-black-500)
);
$text-ai-secondary-hover: var(
  --wds-icon-button-color-text-ai-secondary-hover,
  var(--wds-color-fill-standard-primary-active)
);
$text-ai-tertiary: var(
  --wds-icon-button-color-text-ai-tertiary,
  var(--wds-color-text-primary)
);
$text-ai-tertiary-active: var(
  --wds-icon-button-color-text-ai-tertiary-active,
  var(--wds-color-fill-standard-primary-active)
);
$text-ai-tertiary-disabled: var(
  --wds-icon-button-color-text-ai-tertiary-disabled,
  var(--wds-color-black-500)
);
$text-ai-tertiary-hover: var(
  --wds-icon-button-color-text-ai-tertiary-hover,
  var(--wds-color-fill-standard-primary-active)
);

.icon-button {
  width: $button-size-medium;
  height: $button-size-medium;
  border-radius: $button-border-radius-medium;
  border: 1px solid;
  border-color: $fill-standard-primary;

  &#{&}--disabled {
    background-color: $fill-standard-primary-disabled;
    color: $text-standard-primary-disabled;
  }

  &#{&}--priority-secondary {
    background: $fill-standard-secondary;
    border: solid 1px $border-standard-secondary;
    color: $text-standard-secondary;
  }

  @media (hover: hover) {
    &#{&}--priority-secondary:hover,
    &#{&}--skin-inverted:hover,
    &#{&}--skin-inverted#{&}--priority-secondary:hover {
      background-color: $fill-standard-secondary-hover;
      color: $text-standard-secondary-hover;
    }
  }

  &#{&}--priority-secondary:active,
  &#{&}--skin-inverted:active,
  &#{&}--skin-inverted#{&}--priority-secondary:active {
    background-color: $fill-standard-secondary-active;
    border-color: $border-standard-secondary-active;
    color: $text-standard-secondary-active;
  }

  &#{&}--priority-secondary#{&}--disabled {
    background-color: $fill-standard-secondary-disabled;
    border-color: $border-standard-secondary-disabled;
    color: $text-standard-secondary-disabled;
  }

  &#{&}--priority-tertiary {
    background: $fill-standard-tertiary;
    border: none;
    color: $text-standard-tertiary;
  }

  @media (hover: hover) {
    &#{&}--priority-tertiary:hover {
      background: $fill-standard-tertiary-hover;
      border-color: transparent;
      color: $text-standard-tertiary-hover;
    }
  }

  &#{&}--priority-tertiary:active {
    background: $fill-standard-tertiary-active;
    border-color: transparent;
    color: $text-standard-tertiary-active;
  }

  &#{&}--priority-tertiary#{&}--disabled {
    background: $fill-standard-tertiary-disabled;
    border-color: transparent;
    color: $text-standard-tertiary-disabled;
  }

  &#{&}--skin-inverted {
    background: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: solid 1px $border-standard-secondary;
    color: $text-standard-secondary;
  }

  &#{&}--skin-inverted#{&}--disabled,
  &#{&}--skin-inverted#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-color-fill-standard-tertiary-disabled,
      var(--wsr-color-D80, #ffffff)
    );
    border-color: var(
      --wds-color-border-standard-secondary-disabled,
      var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
    );
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--skin-inverted#{&}--priority-secondary {
    background: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: solid 1px $border-standard-secondary;
    color: $text-standard-secondary;
  }

  &#{&}--skin-light {
    background-color: $fill-light-primary;
    border: none;
    color: $text-light-primary;
  }

  @media (hover: hover) {
    &#{&}--skin-light:hover {
      background-color: $fill-light-primary-hover;
      color: $text-light-primary-hover;
      border-color: $fill-light-primary-hover;
    }
  }

  &#{&}--skin-light:active {
    background-color: $fill-light-primary-active;
    color: $text-light-primary-active;
  }

  &#{&}--skin-light#{&}--disabled {
    background-color: $fill-light-primary-disabled;
    border-color: transparent;
    color: $text-light-primary-disabled;
  }

  &#{&}--skin-light#{&}--priority-secondary {
    background: $fill-light-secondary;
    border: solid 1px $border-light-secondary;
    color: $text-light-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-light#{&}--priority-secondary:hover {
      background-color: $fill-light-secondary-hover;
      border-color: $border-light-secondary-hover;
      color: $text-light-secondary-hover;
    }
  }

  &#{&}--skin-light#{&}--priority-secondary:active {
    background-color: $fill-light-secondary-active;
    border: solid 1px $border-light-secondary-active;
    color: $text-light-secondary-active;
  }

  &#{&}--skin-light#{&}--priority-secondary#{&}--disabled {
    background-color: $fill-light-secondary-disabled;
    border-color: $border-light-secondary-disabled;
    color: $text-light-secondary-disabled;
  }

  &#{&}--skin-light#{&}--priority-tertiary {
    background: $fill-light-tertiary;
    border: none;
    color: $text-light-tertiary;
  }

  @media (hover: hover) {
    &#{&}--skin-light#{&}--priority-tertiary:hover {
      background: $fill-light-tertiary-hover;
      border-color: transparent;
      color: $text-light-tertiary-hover;
    }
  }

  &#{&}--skin-light#{&}--priority-tertiary:active {
    background: $fill-light-tertiary-active;
    border: none;
    color: $text-light-tertiary-active;
  }

  &#{&}--skin-light#{&}--priority-tertiary#{&}--disabled {
    background: $fill-light-tertiary-disabled;
    border-color: transparent;
    color: $text-light-tertiary-disabled;
  }

  &#{&}--skin-transparent {
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: var(
      --wds-color-fill-transparent-primary,
      color-mix(in srgb, var(--wsr-color-D20, #333853) 48%, transparent)
    );
    border-color: transparent;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-transparent:hover {
      background-color: var(
        --wds-color-fill-transparent-primary-hover,
        var(--wsr-color-D20-60, rgba(51, 56, 83, 0.6))
      );
      border-color: transparent;
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
    }
  }

  &#{&}--skin-transparent:active {
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: var(
      --wds-color-fill-transparent-primary-active,
      color-mix(in srgb, var(--wsr-color-D20, #333853) 72%, transparent)
    );
    border-color: transparent;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &#{&}--skin-transparent#{&}--disabled {
    background-color: var(
      --wds-color-fill-transparent-primary-disabled,
      var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))
    );
    border-color: transparent;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
    );
  }

  &#{&}--skin-transparent#{&}--priority-secondary {
    background-color: var(--wds-color-fill-transparent-secondary, transparent);
    border-color: var(--wds-color-fill-transparent-secondary, transparent);
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-transparent#{&}--priority-secondary:hover {
      /* stylelint-disable-next-line plugin/use-baseline */
      background-color: var(
        --wds-color-fill-transparent-secondary-hover,
        color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent)
      );
      border-color: transparent;
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
    }
  }

  &#{&}--skin-transparent#{&}--priority-secondary:active {
    background-color: var(
      --wds-color-fill-transparent-secondary-active,
      var(--wsr-color-D20-60, rgba(51, 56, 83, 0.6))
    );
    border-color: transparent;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &#{&}--skin-transparent#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-color-fill-transparent-secondary-disabled,
      transparent
    );
    border-color: var(
      --wds-color-border-dark-secondary-disabled,
      var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))
    );
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--skin-transparent#{&}--priority-tertiary {
    background-color: var(--wds-color-fill-transparent-tertiary, transparent);
    border-color: transparent;
    color: var(
      --wds-button-label-fill-transparent-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-transparent#{&}--priority-tertiary:hover {
      background-color: var(--wds-color-fill-transparent-tertiary, transparent);
      border-color: transparent;
      /* stylelint-disable-next-line plugin/use-baseline */
      color: var(
        --wds-color-fill-transparent-tertiary-hover,
        color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent)
      );
    }
  }

  &#{&}--skin-transparent#{&}--priority-tertiary:active {
    background-color: var(--wds-color-fill-transparent-tertiary, transparent);
    border-color: transparent;
    color: var(
      --wds-color-fill-transparent-tertiary-active,
      var(--wsr-color-D20-60, rgba(51, 56, 83, 0.6))
    );
  }

  &#{&}--skin-transparent#{&}--priority-tertiary#{&}--disabled {
    background-color: var(--wds-color-fill-transparent-tertiary, transparent);
    border-color: transparent;
    color: var(
      --wds-color-fill-transparent-tertiary-disabled,
      var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
    );
  }

  &#{&}--skin-premium {
    background-color: $fill-premium-primary;
    border: none;
    color: $text-premium-primary;
  }

  @media (hover: hover) {
    &#{&}--skin-premium:hover {
      background-color: $fill-premium-primary-hover;
      border-color: $fill-premium-primary-hover;
      color: $text-premium-primary-hover;
    }
  }

  &#{&}--skin-premium:active {
    background-color: $fill-premium-primary-active;
    border-color: $fill-premium-primary-active;
    color: $text-premium-primary-active;
  }

  &#{&}--skin-premium#{&}--disabled {
    background-color: $fill-premium-primary-disabled;
    border-color: transparent;
    color: $text-premium-primary-disabled;
  }

  &#{&}--skin-premium#{&}--priority-secondary {
    background-color: $fill-premium-secondary;
    border: solid 1px $border-premium-secondary;
    color: $text-premium-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-premium#{&}--priority-secondary:hover {
      background-color: $fill-premium-secondary-hover;
      border-color: $fill-premium-secondary-hover;
      color: $text-premium-secondary-hover;
    }
  }

  &#{&}--skin-premium#{&}--priority-secondary:active {
    background-color: $fill-premium-secondary-active;
    border: solid 1px $border-premium-secondary-active;
    color: $text-premium-secondary-active;
  }

  &#{&}--skin-premium#{&}--priority-secondary#{&}--disabled {
    background-color: $fill-premium-secondary-disabled;
    border-color: $border-premium-secondary-disabled;
    color: $text-premium-secondary-disabled;
  }

  &#{&}--skin-premium#{&}--priority-tertiary {
    background-color: $fill-premium-tertiary;
    border: none;
    color: $text-premium-tertiary;
  }

  @media (hover: hover) {
    &#{&}--skin-premium#{&}--priority-tertiary:hover {
      background-color: $fill-premium-tertiary-hover;
      border-color: transparent;
      color: $text-premium-tertiary-hover;
    }
  }

  &#{&}--skin-premium#{&}--priority-tertiary:active {
    background-color: $fill-premium-tertiary-active;
    border: none;
    color: $text-premium-tertiary-active;
  }

  &#{&}--skin-premium#{&}--priority-tertiary#{&}--disabled {
    background-color: $fill-premium-tertiary-disabled;
    border-color: transparent;
    color: $text-premium-tertiary-disabled;
  }

  &#{&}--skin-dark {
    background-color: $fill-dark-primary;
    border: none;
    color: $text-dark-primary;
  }

  @media (hover: hover) {
    &#{&}--skin-dark:hover {
      background-color: $fill-dark-primary-hover;
      border: none;
      color: $text-dark-primary-hover;
    }
  }

  &#{&}--skin-dark:active {
    background-color: $fill-dark-primary-active;
    border: none;
    color: $text-dark-primary-active;
  }

  &#{&}--skin-dark#{&}--disabled {
    background-color: $fill-dark-primary-disabled;
    border: none;
    color: $text-dark-primary-disabled;
  }

  &#{&}--skin-dark#{&}--priority-secondary {
    background-color: $fill-dark-secondary;
    border: solid 1px $border-dark-secondary;
    color: $text-dark-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-dark#{&}--priority-secondary:hover {
      background-color: $fill-dark-secondary-hover;
      border-color: $fill-dark-secondary-hover;
      color: $text-dark-secondary-hover;
    }
  }

  &#{&}--skin-dark#{&}--priority-secondary:active {
    background-color: $fill-dark-secondary-active;
    border-color: $fill-dark-secondary-active;
    color: $text-dark-secondary-active;
  }

  &#{&}--skin-dark#{&}--priority-secondary#{&}--disabled {
    background-color: $fill-dark-secondary-disabled;
    border: solid 1px $border-dark-secondary-disabled;
    color: $text-dark-secondary-disabled;
  }

  &#{&}--skin-dark#{&}--priority-tertiary {
    background-color: $fill-dark-tertiary;
    border: none;
    color: $text-dark-tertiary;
  }

  @media (hover: hover) {
    &#{&}--skin-dark#{&}--priority-tertiary:hover {
      background: $fill-dark-tertiary-hover;
      border: none;
      color: $text-dark-tertiary-hover;
    }
  }

  &#{&}--skin-dark#{&}--priority-tertiary:active {
    background: $fill-dark-tertiary-active;
    border: none;
    color: $text-dark-tertiary-active;
  }

  &#{&}--skin-dark#{&}--priority-tertiary#{&}--disabled {
    background-color: $fill-dark-tertiary-disabled;
    border: none;
    color: $text-dark-tertiary-disabled;
  }

  &#{&}--skin-ai {
    background: $fill-ai-primary;
    border: $border-ai-width solid $border-ai-primary;
    color: $text-ai-primary;
  }

  @media (hover: hover) {
    &#{&}--skin-ai:hover {
      background: $fill-ai-primary-hover;
      border-color: $border-ai-primary-hover;
    }
  }

  &#{&}--skin-ai:active {
    background: $fill-ai-primary-active;
    border-color: $border-ai-primary-active;
  }

  &#{&}--skin-ai#{&}--disabled {
    background: $fill-ai-primary-disabled;
    border-color: transparent;
    color: $text-ai-primary-disabled;
  }

  &#{&}--skin-ai#{&}--priority-secondary {
    background: $fill-ai-secondary;
    border: $border-ai-width solid $border-ai-secondary;
    color: $text-ai-secondary;
  }

  &#{&}--skin-ai#{&}--priority-secondary:not(:hover):not(:active):not(&--disabled)::after {
    display: $border-ai-secondary-ring-display;
  }

  @media (hover: hover) {
    &#{&}--skin-ai#{&}--priority-secondary:hover {
      background: $fill-ai-secondary-hover;
      border-color: $border-ai-secondary-hover;
      color: $text-ai-secondary-hover;
    }
  }

  &#{&}--skin-ai#{&}--priority-secondary:active {
    background: $fill-ai-secondary-active;
    border-color: $border-ai-secondary-active;
    color: $text-ai-secondary-active;
  }

  &#{&}--skin-ai#{&}--priority-secondary#{&}--disabled {
    background: $fill-ai-secondary-disabled;
    border: 1px solid $border-ai-secondary-disabled;
    color: $text-ai-secondary-disabled;
  }

  &#{&}--skin-ai#{&}--priority-tertiary {
    background: $fill-ai-tertiary;
    border: none;
    color: $text-ai-tertiary;
  }

  @media (hover: hover) {
    &#{&}--skin-ai#{&}--priority-tertiary:hover {
      background: $fill-ai-tertiary-hover;
      border-color: transparent;
      color: $text-ai-tertiary-hover;
    }
  }

  &#{&}--skin-ai#{&}--priority-tertiary:active {
    background: $fill-ai-tertiary-active;
    border-color: transparent;
    color: $text-ai-tertiary-active;
  }

  &#{&}--skin-ai#{&}--priority-tertiary#{&}--disabled {
    background: $fill-ai-tertiary-disabled;
    border-color: transparent;
    color: $text-ai-tertiary-disabled;
  }

  &#{&}--skin-destructive {
    background-color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
    border: none;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-destructive:hover {
      background-color: var(
        --wds-color-fill-destructive-primary-hover,
        var(--wsr-color-R05, #d0180b)
      );
      border: none;
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
    }
  }

  &#{&}--skin-destructive:active {
    background-color: var(
      --wds-color-fill-destructive-primary-active,
      var(--wsr-color-R00, #b81206)
    );
    border: none;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &#{&}--skin-destructive#{&}--disabled {
    background-color: var(
      --wds-color-fill-destructive-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
    border: none;
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80, #ffffff));
  }

  &#{&}--skin-destructive#{&}--priority-secondary {
    background-color: var(
      --wds-color-fill-destructive-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: solid 1px
      var(--wds-color-border-destructive-primary, var(--wsr-color-R30, #f69891));
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-destructive#{&}--priority-secondary:hover {
      background-color: var(
        --wds-color-fill-destructive-primary-hover,
        var(--wsr-color-R05, #d0180b)
      );
      border-color: var(
        --wds-color-fill-destructive-primary-hover,
        var(--wsr-color-R05, #d0180b)
      );
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
    }
  }

  &#{&}--skin-destructive#{&}--priority-secondary:active {
    background-color: var(
      --wds-color-fill-destructive-primary-active,
      var(--wsr-color-R00, #b81206)
    );
    border-color: var(
      --wds-color-fill-destructive-primary-active,
      var(--wsr-color-R00, #b81206)
    );
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &#{&}--skin-destructive#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-color-fill-destructive-tertiary-disabled,
      var(--wsr-color-D80, #ffffff)
    );
    border: solid 1px
      var(
        --wds-color-border-standard-secondary-disabled,
        var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
      );
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--skin-destructive#{&}--priority-tertiary {
    background: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: none;
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-destructive#{&}--priority-tertiary:hover {
      background-color: var(
        --wds-color-fill-destructive-secondary,
        var(--wsr-color-R40, #fbd0cd)
      );
      border: none;
      color: var(
        --wds-color-fill-destructive-primary,
        var(--wsr-color-R10, #e62214)
      );
    }
  }

  &#{&}--skin-destructive#{&}--priority-tertiary:active {
    background-color: var(
      --wds-color-fill-destructive-tertiary-active,
      var(--wsr-color-R40, #fbd0cd)
    );
    border: none;
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  &#{&}--skin-destructive#{&}--priority-tertiary#{&}--disabled {
    background: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: none;
    color: var(
      --wds-color-fill-destructive-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--size-tiny {
    width: $button-size-tiny;
    height: $button-size-tiny;
    border-radius: $button-border-radius-tiny;
  }

  &#{&}--size-small {
    width: $button-size-small;
    height: $button-size-small;
    border-radius: $button-border-radius-small;
  }

  &#{&}--size-large {
    width: $button-size-large;
    height: $button-size-large;
    border-radius: $button-border-radius-large;
  }
}