@use 'Foundation/scss/button-chains.odeditor' as chains;
@use 'Foundation/scss/typography-chains' as typography;

$border-dark-secondary: var(
  --wds-button-border-dark-secondary,
  var(--wds-color-border-dark-primary)
);
$border-dark-secondary-active: var(
  --wds-button-border-dark-secondary-active,
  var(--wds-color-black-550)
);
$border-dark-secondary-disabled: var(
  --wds-button-border-dark-secondary-disabled,
  var(--wds-color-black-700)
);
$border-dark-secondary-hover: var(
  --wds-button-border-dark-secondary-hover,
  var(--wds-color-black-550)
);
$border-destructive-secondary: var(
  --wds-button-border-destructive-secondary,
  var(--wds-color-border-destructive-primary)
);
$border-destructive-secondary-active: var(
  --wds-button-border-destructive-secondary-active,
  var(--wds-color-border-destructive-tertiary-active)
);
$border-destructive-secondary-disabled: var(
  --wds-button-border-destructive-secondary-disabled,
  var(--wds-color-black-700)
);
$border-destructive-secondary-hover: var(
  --wds-button-border-destructive-secondary-hover,
  var(--wds-color-red-400)
);
$border-premium-secondary: var(
  --wds-button-border-premium-secondary,
  var(--wds-color-border-premium-secondary-hover)
);
$border-premium-secondary-active: var(
  --wds-button-border-premium-secondary-active,
  var(--wds-color-fill-premium-tertiary-active)
);
$border-premium-secondary-disabled: var(
  --wds-button-border-premium-secondary-disabled,
  var(--wds-color-black-700)
);
$border-premium-secondary-hover: var(
  --wds-button-border-premium-secondary-hover,
  var(--wds-color-fill-premium-secondary-hover)
);
$border-radius-large: var(
  --wds-button-border-radius-large,
  var(--wds-border-radius-400)
);
$border-radius-medium: var(
  --wds-button-border-radius-medium,
  var(--wds-border-radius-400)
);
$border-radius-small: var(
  --wds-button-border-radius-small,
  var(--wds-border-radius-300)
);
$border-radius-tiny: var(
  --wds-button-border-radius-tiny,
  var(--wds-border-radius-300)
);
$border-standard-secondary: var(
  --wds-button-border-standard-secondary,
  var(--wds-color-border-standard-primary)
);
$border-standard-secondary-active: var(
  --wds-button-border-standard-secondary-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$border-standard-secondary-disabled: var(
  --wds-button-border-standard-secondary-disabled,
  var(--wds-color-black-700)
);
$border-standard-secondary-hover: var(
  --wds-button-border-standard-secondary-hover,
  var(--wds-color-border-standard-secondary-hover)
);
$fill-dark-primary-disabled: var(
  --wds-button-fill-dark-primary-disabled,
  var(--wds-color-black-700)
);
$fill-dark-secondary-active: var(
  --wds-button-fill-dark-secondary-active,
  var(--wds-color-black-550)
);
$fill-dark-secondary-disabled: var(
  --wds-button-fill-dark-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-dark-secondary-hover: var(
  --wds-button-fill-dark-secondary-hover,
  var(--wds-color-black-700)
);
$fill-destructive-primary-disabled: var(
  --wds-button-fill-destructive-primary-disabled,
  var(--wds-color-black-700)
);
$fill-destructive-secondary: var(
  --wds-button-fill-destructive-secondary,
  var(--wds-color-white-transparent-0)
);
$fill-destructive-secondary-active: var(
  --wds-button-fill-destructive-secondary-active,
  var(--wds-color-fill-destructive-tertiary-active)
);
$fill-destructive-secondary-disabled: var(
  --wds-button-fill-destructive-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-destructive-secondary-hover: var(
  --wds-button-fill-destructive-secondary-hover,
  var(--wds-color-fill-destructive-tertiary-hover)
);
$fill-premium-primary: var(
  --wds-button-fill-premium-primary,
  var(--wds-color-fill-premium-primary)
);
$fill-premium-primary-active: var(
  --wds-button-fill-premium-primary-active,
  var(--wds-color-fill-premium-primary-active)
);
$fill-premium-primary-disabled: var(
  --wds-button-fill-premium-primary-disabled,
  var(--wds-color-black-700)
);
$fill-premium-primary-hover: var(
  --wds-button-fill-premium-primary-hover,
  var(--wds-color-fill-premium-primary-hover)
);
$fill-premium-secondary: var(
  --wds-button-fill-premium-secondary,
  var(--wds-color-white-transparent-0)
);
$fill-premium-secondary-active: var(
  --wds-button-fill-premium-secondary-active,
  var(--wds-color-fill-premium-tertiary-active)
);
$fill-premium-secondary-disabled: var(
  --wds-button-fill-premium-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-premium-secondary-hover: var(
  --wds-button-fill-premium-secondary-hover,
  var(--wds-color-fill-premium-tertiary-hover)
);
$fill-standard-primary-disabled: var(
  --wds-button-fill-standard-primary-disabled,
  var(--wds-color-black-700)
);
$fill-standard-secondary: var(
  --wds-button-fill-standard-secondary,
  var(--wds-color-white-transparent-0)
);
$fill-standard-secondary-active: var(
  --wds-button-fill-standard-secondary-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$fill-standard-secondary-disabled: var(
  --wds-button-fill-standard-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-standard-secondary-hover: var(
  --wds-button-fill-standard-secondary-hover,
  var(--wds-color-fill-standard-tertiary-hover)
);
$font-line-height-large: var(
  --wds-button-font-line-height-large,
  var(--wds-font-line-height-body-medium)
);
$font-line-height-medium: var(
  --wds-button-font-line-height-medium,
  var(--wds-font-line-height-body-medium)
);
$font-line-height-small: var(
  --wds-button-font-line-height-small,
  var(--wds-font-line-height-body-tiny)
);
$font-line-height-tiny: var(
  --wds-button-font-line-height-tiny,
  var(--wds-font-line-height-body-tiny)
);
$font-size-large: var(
  --wds-button-font-size-large,
  var(--wds-font-size-body-medium)
);
$font-size-medium: var(
  --wds-button-font-size-medium,
  var(--wds-font-size-body-small)
);
$font-size-small: var(
  --wds-button-font-size-small,
  var(--wds-font-size-body-tiny)
);
$font-size-tiny: var(
  --wds-button-font-size-tiny,
  var(--wds-font-size-body-tiny)
);
$font-weight-large: var(
  --wds-button-font-weight-large,
  var(--wds-font-weight-semi-bold)
);
$font-weight-medium: var(
  --wds-button-font-weight-medium,
  var(--wds-font-weight-semi-bold)
);
$font-weight-small: var(
  --wds-button-font-weight-small,
  var(--wds-font-weight-semi-bold)
);
$font-weight-tiny: var(
  --wds-button-font-weight-tiny,
  var(--wds-font-weight-semi-bold)
);
$gap-large: var(
  --wds-button-gap-large,
  var(--wds-space-100)
);
$gap-medium: var(
  --wds-button-gap-medium,
  var(--wds-space-100)
);
$gap-small: var(
  --wds-button-gap-small,
  var(--wds-space-100)
);
$gap-tiny: var(
  --wds-button-gap-tiny,
  var(--wds-space-100)
);
$label-fill-dark-primary-disabled: var(
  --wds-button-label-fill-dark-primary-disabled,
  var(--wds-color-black-500)
);
$label-fill-dark-secondary: var(
  --wds-button-label-fill-dark-secondary,
  var(--wds-color-text-standard-primary)
);
$label-fill-dark-secondary-active: var(
  --wds-button-label-fill-dark-secondary-active,
  var(--wds-color-text-standard-primary)
);
$label-fill-dark-secondary-disabled: var(
  --wds-button-label-fill-dark-secondary-disabled,
  var(--wds-color-black-500)
);
$label-fill-dark-secondary-hover: var(
  --wds-button-label-fill-dark-secondary-hover,
  var(--wds-color-text-standard-primary)
);
$label-fill-destructive-secondary: var(
  --wds-button-label-fill-destructive-secondary,
  var(--wds-color-text-destructive)
);
$label-fill-destructive-secondary-active: var(
  --wds-button-label-fill-destructive-secondary-active,
  var(--wds-color-fill-destructive-primary-active)
);
$label-fill-destructive-secondary-hover: var(
  --wds-button-label-fill-destructive-secondary-hover,
  var(--wds-color-fill-destructive-primary-hover)
);
$label-fill-premium-primary: var(
  --wds-button-label-fill-premium-primary,
  var(--wds-color-text-standard-primary-light)
);
$label-fill-premium-primary-disabled: var(
  --wds-button-label-fill-premium-primary-disabled,
  var(--wds-color-black-500)
);
$label-fill-premium-secondary: var(
  --wds-button-label-fill-premium-secondary,
  var(--wds-color-text-premium)
);
$label-fill-premium-secondary-active: var(
  --wds-button-label-fill-premium-secondary-active,
  var(--wds-color-fill-premium-primary-active)
);
$label-fill-premium-secondary-disabled: var(
  --wds-button-label-fill-premium-secondary-disabled,
  var(--wds-color-black-500)
);
$label-fill-premium-secondary-hover: var(
  --wds-button-label-fill-premium-secondary-hover,
  var(--wds-color-fill-premium-primary-active)
);
$label-fill-standard-primary-disabled: var(
  --wds-button-label-fill-standard-primary-disabled,
  var(--wds-color-black-500)
);
$label-fill-standard-secondary: var(
  --wds-button-label-fill-standard-secondary,
  var(--wds-color-fill-standard-primary-hover)
);
$label-fill-standard-secondary-active: var(
  --wds-button-label-fill-standard-secondary-active,
  var(--wds-color-fill-standard-primary-active)
);
$label-fill-standard-secondary-disabled: var(
  --wds-button-label-fill-standard-secondary-disabled,
  var(--wds-color-black-500)
);
$label-fill-standard-secondary-hover: var(
  --wds-button-label-fill-standard-secondary-hover,
  var(--wds-color-fill-standard-primary-active)
);
$padding-horizontal-large: var(
  --wds-button-padding-horizontal-large,
  var(--wds-space-600)
);
$padding-horizontal-medium: var(
  --wds-button-padding-horizontal-medium,
  var(--wds-space-500)
);
$padding-horizontal-small: var(
  --wds-button-padding-horizontal-small,
  var(--wds-space-400)
);
$padding-horizontal-tiny: var(
  --wds-button-padding-horizontal-tiny,
  var(--wds-space-300)
);
$padding-vertical-large: var(
  --wds-button-padding-vertical-large,
  var(--wds-space-150)
);
$padding-vertical-medium: var(
  --wds-button-padding-vertical-medium,
  var(--wds-space-150)
);
$padding-vertical-small: var(
  --wds-button-padding-vertical-small,
  var(--wds-space-150)
);
$padding-vertical-tiny: var(
  --wds-button-padding-vertical-tiny,
  var(--wds-space-50)
);


$border-ai-secondary: var(
  --wds-button-border-ai-secondary,
  var(--wds-color-border-standard-primary)
);
$border-ai-secondary-active: var(
  --wds-button-border-ai-secondary-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$border-ai-secondary-disabled: var(
  --wds-button-border-ai-secondary-disabled,
  var(--wds-color-black-700)
);
$border-ai-secondary-hover: var(
  --wds-button-border-ai-secondary-hover,
  var(--wds-color-border-standard-secondary-hover)
);
$border-ai-secondary-mask: var(
  --wds-button-border-ai-secondary-mask,
  none
);
$border-ai-secondary-ring-display: var(
  --wds-button-border-ai-secondary-ring-display,
  none
);
$border-ai-tertiary-disabled: var(
  --wds-button-border-ai-tertiary-disabled,
  var(--wds-color-black-700)
);
$fill-ai-primary: var(
  --wds-button-fill-ai-primary,
  var(--wds-color-fill-standard-primary)
);
$fill-ai-primary-active: var(
  --wds-button-fill-ai-primary-active,
  var(--wds-color-fill-standard-primary-active)
);
$fill-ai-primary-disabled: var(
  --wds-button-fill-ai-primary-disabled,
  var(--wds-color-black-700)
);
$fill-ai-primary-hover: var(
  --wds-button-fill-ai-primary-hover,
  var(--wds-color-fill-standard-primary-hover)
);
$fill-ai-secondary: var(
  --wds-button-fill-ai-secondary,
  var(--wds-color-white-transparent-0)
);
$fill-ai-secondary-active: var(
  --wds-button-fill-ai-secondary-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$fill-ai-secondary-disabled: var(
  --wds-button-fill-ai-secondary-disabled,
  var(--wds-color-black-700)
);
$fill-ai-secondary-hover: var(
  --wds-button-fill-ai-secondary-hover,
  var(--wds-color-fill-standard-tertiary-hover)
);
$fill-ai-tertiary: var(
  --wds-button-fill-ai-tertiary,
  var(--wds-color-white-transparent-0)
);
$fill-ai-tertiary-active: var(
  --wds-button-fill-ai-tertiary-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$fill-ai-tertiary-disabled: var(
  --wds-button-fill-ai-tertiary-disabled,
  var(--wds-color-black-700)
);
$fill-ai-tertiary-hover: var(
  --wds-button-fill-ai-tertiary-hover,
  var(--wds-color-fill-standard-tertiary-hover)
);
$label-fill-ai-primary: var(
  --wds-button-label-fill-ai-primary,
  var(--wds-color-text-standard-primary-light)
);
$label-fill-ai-primary-disabled: var(
  --wds-button-label-fill-ai-primary-disabled,
  var(--wds-color-black-500)
);
$label-fill-ai-secondary: var(
  --wds-button-label-fill-ai-secondary,
  var(--wds-color-fill-standard-primary-hover)
);
$label-fill-ai-secondary-active: var(
  --wds-button-label-fill-ai-secondary-active,
  var(--wds-color-fill-standard-primary-active)
);
$label-fill-ai-secondary-disabled: var(
  --wds-button-label-fill-ai-secondary-disabled,
  var(--wds-color-black-500)
);
$label-fill-ai-secondary-hover: var(
  --wds-button-label-fill-ai-secondary-hover,
  var(--wds-color-fill-standard-primary-active)
);
$label-fill-ai-tertiary: var(
  --wds-button-label-fill-ai-tertiary,
  var(--wds-color-fill-standard-primary-hover)
);
$label-fill-ai-tertiary-active: var(
  --wds-button-label-fill-ai-tertiary-active,
  var(--wds-color-fill-standard-primary-active)
);
$label-fill-ai-tertiary-disabled: var(
  --wds-button-label-fill-ai-tertiary-disabled,
  var(--wds-color-black-500)
);
$label-fill-ai-tertiary-hover: var(
  --wds-button-label-fill-ai-tertiary-hover,
  var(--wds-color-fill-standard-primary-active)
);

.button {
  height: chains.$button-size-medium;
  border-radius: $border-radius-medium;
  padding: $padding-vertical-medium $padding-horizontal-medium;
  color: var(--wds-button-label-fill-standard-primary, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));

  @media (hover: hover) {
    &:hover {
      color: var(--wds-button-label-fill-standard-primary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &:active {
    color: var(--wds-button-label-fill-standard-primary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

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

  &#{&}--skin-standard#{&}--priority-secondary {
    background: $fill-standard-secondary;
    --wds-internal-button-border-color: #{$border-standard-secondary};
    color: $label-fill-standard-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-standard#{&}--priority-secondary:hover {
      background: $fill-standard-secondary-hover;
      --wds-internal-button-border-color: #{$border-standard-secondary-hover};
      color: $label-fill-standard-secondary-hover;
    }
  }

  &#{&}--skin-standard#{&}--priority-secondary:active {
    background: $fill-standard-secondary-active;
    --wds-internal-button-border-color: #{$border-standard-secondary-active};
    color: $label-fill-standard-secondary-active;
  }

  &#{&}--skin-standard#{&}--priority-secondary#{&}--disabled {
    background: $fill-standard-secondary-disabled;
    --wds-internal-button-border-color: #{$border-standard-secondary-disabled};
    color: $label-fill-standard-secondary-disabled;
  }

  &#{&}--skin-standard#{&}--priority-tertiary {
    background: $fill-standard-secondary;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-standard-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-standard#{&}--priority-tertiary:hover {
      background: $fill-standard-secondary-hover;
      --wds-internal-button-border-color: transparent;
      color: $label-fill-standard-secondary-hover;
    }
  }

  &#{&}--skin-standard#{&}--priority-tertiary:active {
    background: $fill-standard-secondary-active;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-standard-secondary-active;
  }

  &#{&}--skin-standard#{&}--priority-tertiary#{&}--disabled {
    background: $fill-standard-secondary-disabled;
    --wds-internal-button-border-color: #{$border-standard-secondary-disabled};
    color: $label-fill-standard-secondary-disabled;
  }

  &#{&}--skin-inverted {
    background: $fill-standard-secondary;
    --wds-internal-button-border-color: #{$border-standard-secondary};
    color: $label-fill-standard-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-inverted:hover {
      background: $fill-standard-secondary-hover;
      --wds-internal-button-border-color: #{$border-standard-secondary-hover};
      color: $label-fill-standard-secondary-hover;
    }
  }

  &#{&}--skin-inverted:active {
    background: $fill-standard-secondary-active;
    --wds-internal-button-border-color: #{$border-standard-secondary-active};
    color: $label-fill-standard-secondary-active;
  }

  &#{&}--skin-inverted#{&}--disabled {
    background: $fill-standard-secondary-disabled;
    --wds-internal-button-border-color: #{$border-standard-secondary-disabled};
    color: $label-fill-standard-secondary-disabled;
  }

  &#{&}--skin-destructive#{&}--priority-tertiary {
    background: $fill-destructive-secondary;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-destructive-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-destructive#{&}--priority-tertiary:hover {
      background: $fill-destructive-secondary-hover;
      --wds-internal-button-border-color: transparent;
      color: $label-fill-destructive-secondary-hover;
    }
  }

  &#{&}--skin-destructive#{&}--priority-tertiary:active {
    background: $fill-destructive-secondary-active;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-destructive-secondary-active;
  }

  &#{&}--skin-destructive#{&}--priority-tertiary#{&}--disabled {
    background: $fill-destructive-secondary-disabled;
    --wds-internal-button-border-color: #{$border-destructive-secondary-disabled};
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-light {
    background: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #FFFFFF));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  @media (hover: hover) {
    &#{&}--skin-light:hover {
      background: var(--wds-color-fill-light-primary-hover, var(--wsr-color-B50, #E7F0FF));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
    }
  }

  &#{&}--skin-light:active {
    background: var(--wds-color-fill-light-primary-active, var(--wsr-color-B40, #D6E6FE));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  &#{&}--skin-light#{&}--disabled {
    background: var(--wds-color-fill-light-primary-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-light#{&}--priority-secondary {
    background: var(--wds-color-fill-light-secondary, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light, var(--wsr-color-D80-50, rgba(255, 255, 255, 0.50)));
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-light#{&}--priority-secondary:hover {
      background: var(--wds-color-fill-light-secondary-hover, var(--wsr-color-B50, #E7F0FF));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
    }
  }

  &#{&}--skin-light#{&}--priority-secondary:active {
    background: var(--wds-color-fill-light-secondary-active, var(--wsr-color-B40, #D6E6FE));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  &#{&}--skin-light#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-color-fill-light-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

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

  @media (hover: hover) {
    &#{&}--skin-light#{&}--priority-tertiary:hover {
      background: var(--wds-color-fill-light-secondary-hover, var(--wsr-color-B50, #E7F0FF));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
    }
  }

  &#{&}--skin-light#{&}--priority-tertiary:active {
    background: var(--wds-color-fill-light-secondary-active, var(--wsr-color-B40, #D6E6FE));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  &#{&}--skin-light#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-color-fill-light-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

  &#{&}--skin-destructive {
    background: var(--wds-color-fill-destructive-primary, var(--wsr-color-R10, #E62214));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-destructive:hover {
      background: var(--wds-color-fill-destructive-primary-hover, var(--wsr-color-R05, #D0180B));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    }
  }

  &#{&}--skin-destructive:active {
    background: var(--wds-color-fill-destructive-primary-active, var(--wsr-color-R00, #B81206));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-destructive#{&}--disabled {
    background: $fill-destructive-primary-disabled;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-standard-primary-disabled;
  }

  &#{&}--skin-destructive#{&}--priority-secondary {
    background: $fill-destructive-secondary;
    --wds-internal-button-border-color: #{$border-destructive-secondary};
    color: $label-fill-destructive-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-destructive#{&}--priority-secondary:hover {
      background: $fill-destructive-secondary-hover;
      --wds-internal-button-border-color: #{$border-destructive-secondary-hover};
      color: $label-fill-destructive-secondary-hover;
    }
  }

  &#{&}--skin-destructive#{&}--priority-secondary:active {
    background: $fill-destructive-secondary-active;
    --wds-internal-button-border-color: #{$border-destructive-secondary-active};
    color: $label-fill-destructive-secondary-active;
  }

  &#{&}--skin-destructive#{&}--priority-secondary#{&}--disabled {
    background: $fill-destructive-secondary-disabled;
    --wds-internal-button-border-color: #{$border-destructive-secondary-disabled};
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-premium {
    background: $fill-premium-primary;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-premium-primary;
  }

  @media (hover: hover) {
    &#{&}--skin-premium:hover {
      background: $fill-premium-primary-hover;
      --wds-internal-button-border-color: transparent;
      color: $label-fill-premium-primary;
    }
  }

  &#{&}--skin-premium:active {
    background: $fill-premium-primary-active;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-premium-primary;
  }

  &#{&}--skin-premium#{&}--disabled {
    background: $fill-premium-primary-disabled;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-premium-primary-disabled;
  }

  &#{&}--skin-premium#{&}--priority-secondary {
    background: $fill-premium-secondary;
    --wds-internal-button-border-color: #{$border-premium-secondary};
    color: $label-fill-premium-secondary;
  }

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

  &#{&}--skin-premium#{&}--priority-secondary:active {
    background: $fill-premium-secondary-active;
    --wds-internal-button-border-color: #{$border-premium-secondary-active};
    color: $label-fill-premium-secondary-active;
  }

  &#{&}--skin-premium#{&}--priority-secondary#{&}--disabled {
    background: $fill-premium-secondary-disabled;
    --wds-internal-button-border-color: #{$border-premium-secondary-disabled};
    color: $label-fill-premium-secondary-disabled;
  }

  &#{&}--skin-premium#{&}--priority-tertiary {
    background: $fill-premium-secondary;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-premium-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-premium#{&}--priority-tertiary:hover {
      background: $fill-premium-secondary-hover;
      --wds-internal-button-border-color: transparent;
      color: $label-fill-premium-secondary-hover;
    }
  }

  &#{&}--skin-premium#{&}--priority-tertiary:active {
    background: $fill-premium-secondary-active;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-premium-secondary-active;
  }

  &#{&}--skin-premium#{&}--priority-tertiary#{&}--disabled {
    background: $fill-premium-secondary-disabled;
    --wds-internal-button-border-color: #{$border-premium-secondary-disabled};
    color: $label-fill-premium-secondary-disabled;
  }

  &#{&}--skin-premium-light {
    background: var(--wds-color-fill-premium-light-primary, var(--wsr-color-D80, #FFFFFF));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  @media (hover: hover) {
    &#{&}--skin-premium-light:hover {
      background: var(--wds-color-fill-premium-light-primary-hover, var(--wsr-color-P50, #F1E0F9));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
    }
  }

  &#{&}--skin-premium-light:active {
    background: var(--wds-color-fill-premium-light-primary-active, var(--wsr-color-P40, #E3C3F4));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  &#{&}--skin-premium-light#{&}--disabled {
    background: var(--wds-color-fill-premium-light-primary-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-premium-light#{&}--priority-secondary {
    background: var(--wds-color-fill-premium-light-secondary, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light, var(--wsr-color-D80-50, rgba(255, 255, 255, 0.50)));
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-premium-light#{&}--priority-secondary:hover {
      background: var(--wds-color-fill-premium-light-secondary-hover, var(--wsr-color-P50, #F1E0F9));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
    }
  }

  &#{&}--skin-premium-light#{&}--priority-secondary:active {
    background: var(--wds-color-fill-premium-light-secondary-active, var(--wsr-color-P40, #E3C3F4));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  &#{&}--skin-premium-light#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-color-fill-premium-light-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

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

  @media (hover: hover) {
    &#{&}--skin-premium-light#{&}--priority-tertiary:hover {
      background: var(--wds-color-fill-premium-light-secondary-hover, var(--wsr-color-P50, #F1E0F9));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
    }
  }

  &#{&}--skin-premium-light#{&}--priority-tertiary:active {
    background: var(--wds-color-fill-premium-light-secondary-active, var(--wsr-color-P40, #E3C3F4));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  &#{&}--skin-premium-light#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-color-fill-premium-light-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

  &#{&}--skin-dark {
    background: var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-dark:hover {
      background: var(--wds-color-fill-dark-primary-hover, var(--wsr-color-D20, #333853));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    }
  }

  &#{&}--skin-dark:active {
    background: var(--wds-color-fill-dark-primary-active, var(--wsr-color-D10, #000624));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-dark#{&}--disabled {
    background: $fill-dark-primary-disabled;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-dark-primary-disabled;
  }

  &#{&}--skin-dark#{&}--priority-secondary {
    background: transparent;
    --wds-internal-button-border-color: #{$border-dark-secondary};
    color: $label-fill-dark-secondary;
  }

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

  &#{&}--skin-dark#{&}--priority-secondary:active {
    background: $fill-dark-secondary-active;
    --wds-internal-button-border-color: #{$border-dark-secondary-active};
    color: $label-fill-dark-secondary-active;
  }

  &#{&}--skin-dark#{&}--priority-secondary#{&}--disabled {
    background: $fill-dark-secondary-disabled;
    --wds-internal-button-border-color: #{$border-dark-secondary-disabled};
    color: $label-fill-dark-secondary-disabled;
  }

  &#{&}--skin-dark#{&}--priority-tertiary {
    background: transparent;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-dark-secondary;
  }

  @media (hover: hover) {
    &#{&}--skin-dark#{&}--priority-tertiary:hover {
      background: $fill-dark-secondary-hover;
      --wds-internal-button-border-color: transparent;
      color: $label-fill-dark-secondary-hover;
    }
  }

  &#{&}--skin-dark#{&}--priority-tertiary:active {
    background: $fill-dark-secondary-active;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-dark-secondary-active;
  }

  &#{&}--skin-dark#{&}--priority-tertiary#{&}--disabled {
    background: $fill-dark-secondary-disabled;
    --wds-internal-button-border-color: #{$border-dark-secondary-disabled};
    color: $label-fill-dark-secondary-disabled;
  }

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

  @media (hover: hover) {
    &#{&}--skin-transparent:hover {
      background: var(--wds-color-fill-transparent-primary-hover, var(--wsr-color-D20-60, rgba(51, 56, 83, 0.60)));
      --wds-internal-button-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: var(--wds-color-fill-transparent-primary-active, color-mix(in srgb, var(--wsr-color-D20, #333853) 72%, transparent));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

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

  &#{&}--skin-transparent#{&}--priority-secondary {
    background: var(--wds-color-fill-transparent-secondary, transparent);
    --wds-internal-button-border-color: 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: var(--wds-color-fill-transparent-secondary-hover, color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    }
  }

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

  &#{&}--skin-transparent#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-color-fill-transparent-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-dark-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10)));
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

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

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

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

  &#{&}--skin-transparent#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-color-fill-transparent-secondary-disabled, transparent);
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-ai {
    background: $fill-ai-primary;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-ai-primary;
  }

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

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

  &#{&}--skin-ai#{&}--disabled {
    background: $fill-ai-primary-disabled;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-ai-primary-disabled;
  }

  &#{&}--skin-ai#{&}--priority-secondary {
    background: $fill-ai-secondary;
    --wds-internal-button-border-color: #{$border-ai-secondary};
    color: $label-fill-ai-secondary;
  }

  &#{&}--skin-ai#{&}--priority-secondary:not(:hover):not(:active):not(&--disabled)::after {
    display: $border-ai-secondary-ring-display;
    /* stylelint-disable-next-line plugin/use-baseline */
    mask: $border-ai-secondary-mask;
    /* stylelint-disable-next-line plugin/use-baseline */
    mask-composite: exclude;
  }

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

  &#{&}--skin-ai#{&}--priority-secondary:active {
    background: $fill-ai-secondary-active;
    --wds-internal-button-border-color: #{$border-ai-secondary-active};
    color: $label-fill-ai-secondary-active;
  }

  &#{&}--skin-ai#{&}--priority-secondary#{&}--disabled {
    background: $fill-ai-secondary-disabled;
    --wds-internal-button-border-color: #{$border-ai-secondary-disabled};
    color: $label-fill-ai-secondary-disabled;
  }

  &#{&}--skin-ai#{&}--priority-tertiary {
    background: $fill-ai-tertiary;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-ai-tertiary;
  }

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

  &#{&}--skin-ai#{&}--priority-tertiary:active {
    background: $fill-ai-tertiary-active;
    --wds-internal-button-border-color: transparent;
    color: $label-fill-ai-tertiary-active;
  }

  &#{&}--skin-ai#{&}--priority-tertiary#{&}--disabled {
    background: $fill-ai-tertiary-disabled;
    --wds-internal-button-border-color: #{$border-ai-tertiary-disabled};
    color: $label-fill-ai-tertiary-disabled;
  }

  &#{&}--size-large {
    height: chains.$button-size-large;
    font-family: typography.$font-family-default;
    font-size: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px));
    font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
    line-height: var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px));
    line-height: $font-line-height-large;
    font-size: $font-size-large;
    font-weight: $font-weight-large;
    border-radius: $border-radius-large;
    padding: $padding-vertical-large $padding-horizontal-large;
  }

  &#{&}--size-medium {
    line-height: $font-line-height-medium;
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
  }

  &#{&}--size-small {
    height: chains.$button-size-small;
    font-family: typography.$font-family-default;
    font-size: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px));
    font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
    line-height: var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px));
    line-height: $font-line-height-small;
    font-size: $font-size-small;
    font-weight: $font-weight-small;
    border-radius: $border-radius-small;
    padding: $padding-vertical-small $padding-horizontal-small;
  }

  &#{&}--size-tiny {
    height: chains.$button-size-tiny;
    font-family: typography.$font-family-default;
    font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px));
    font-weight: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
    line-height: $font-line-height-tiny;
    font-size: $font-size-tiny;
    font-weight: $font-weight-tiny;
    border-radius: $border-radius-tiny;
    padding: $padding-vertical-tiny $padding-horizontal-tiny;
  }

  &#{&}--size-tiny .button-core__suffix {
    margin: 0 -6px 0 $gap-tiny;
  }

  &#{&}--size-tiny .button-core__prefix {
    margin: 0 $gap-tiny 0 -6px;
  }

  &#{&}--size-small .button-core__suffix {
    margin: 0 -6px 0 $gap-small;
  }

  &#{&}--size-small .button-core__prefix {
    margin: 0 $gap-small 0 -6px;
  }

  & .button-core__suffix {
    height: 24px;
  }

  & .button-core__prefix {
    height: 24px;
  }

  &#{&}--size-large .button-core__suffix {
    margin: 0 -12px 0 $gap-large;
  }

  &#{&}--size-large .button-core__prefix {
    margin: 0 $gap-large 0 -12px;
  }

  :global([dir="rtl"]) &#{&}--size-large .button-core__suffix {
    margin: 0 $gap-large 0 -12px;
  }

  :global([dir="rtl"]) &#{&}--size-large .button-core__prefix {
    margin: 0 -12px 0 $gap-large;
  }

  :global([dir="rtl"]) &#{&}--size-small .button-core__suffix {
    margin: 0 $gap-small 0 -6px;
  }

  :global([dir="rtl"]) &#{&}--size-small .button-core__prefix {
    margin: 0 -6px 0 $gap-small;
  }

  :global([dir="rtl"]) & .button-core__suffix {
    margin: 0 $gap-medium 0 -12px;
  }

  :global([dir="rtl"]) & .button-core__prefix {
    margin: 0 -12px 0 $gap-medium;
  }

  :global([dir="rtl"]) &#{&}--size-tiny .button-core__suffix {
    margin: 0 $gap-tiny 0 -6px;
  }

  :global([dir="rtl"]) &#{&}--size-tiny .button-core__prefix {
    margin: 0 -6px 0 $gap-tiny;
  }
}