$button-border-radius-large: var(
  --wds-button-border-radius-large,
  var(--wds-border-radius-200)
);
$button-border-radius-medium: var(
  --wds-button-border-radius-medium,
  var(--wds-border-radius-200)
);
$button-border-radius-small: var(
  --wds-button-border-radius-small,
  var(--wds-border-radius-200)
);
$button-border-radius-tiny: var(
  --wds-button-border-radius-tiny,
  var(--wds-border-radius-200)
);
$button-size-large: var(--wds-button-size-large, var(--wds-space-900));
$button-size-medium: var(--wds-button-size-medium, var(--wds-space-800));
$button-size-small: var(--wds-button-size-small, var(--wds-space-700));
$button-size-tiny: var(--wds-button-size-tiny, var(--wds-space-600));
$border-dark-secondary-disabled: var(
  --wds-icon-button-color-border-dark-secondary-disabled,
  var(--wds-color-border-dark-secondary-disabled)
);
$border-standard-secondary: var(
  --wds-icon-button-color-border-standard-secondary,
  var(--wds-color-border-standard-secondary)
);
$fill-dark-primary: var(
  --wds-icon-button-color-fill-dark-primary,
  var(--wds-color-fill-dark-primary)
);
$fill-dark-secondary-active: var(
  --wds-icon-button-color-fill-dark-secondary-active,
  var(--wds-color-fill-standard-primary-active)
);
$fill-dark-secondary-disabled: var(
  --wds-icon-button-color-fill-dark-secondary-disabled,
  var(--wds-color-fill-light-secondary-disabled)
);
$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-disabled)
);
$fill-dark-tertiary-hover: var(
  --wds-icon-button-color-fill-dark-tertiary-hover,
  var(--wds-color-fill-dark-tertiary-hover)
);
$fill-light-primary: var(
  --wds-icon-button-color-fill-light-primary,
  var(--wds-color-fill-light-primary)
);
$fill-premium-primary: var(
  --wds-icon-button-color-fill-premium-primary,
  var(--wds-color-fill-premium-primary)
);
$fill-standard-primary: var(
  --wds-icon-button-color-fill-standard-primary,
  var(--wds-color-white-transparent-0)
);
$fill-standard-primary-active: var(
  --wds-icon-button-color-fill-standard-primary-active,
  var(--wds-color-blue-500)
);
$fill-standard-primary-disabled: var(
  --wds-icon-button-color-fill-standard-primary-disabled,
  var(--wds-color-white-transparent-0)
);
$fill-standard-primary-hover: var(
  --wds-icon-button-color-fill-standard-primary-hover,
  var(--wds-color-black-750)
);
$fill-standard-secondary: var(
  --wds-icon-button-color-fill-standard-secondary,
  var(--wds-color-fill-standard-tertiary)
);
$fill-standard-tertiary: var(
  --wds-icon-button-color-fill-standard-tertiary,
  var(--wds-color-fill-light-secondary)
);
$text-dark-primary: var(
  --wds-icon-button-color-text-dark-primary,
  var(--wds-color-text-standard-primary-light)
);
$text-light-primary: var(
  --wds-icon-button-color-text-light-primary,
  var(--wds-color-text-primary)
);
$text-premium-primary: var(
  --wds-icon-button-color-text-premium-primary,
  var(--wds-color-text-standard-primary-light)
);
$text-standard-primary: var(
  --wds-icon-button-color-text-standard-primary,
  var(--wds-color-text-standard-primary)
);
$text-standard-primary-active: var(
  --wds-icon-button-color-text-standard-primary-active,
  var(--wds-color-text-primary)
);
$text-standard-primary-disabled: var(
  --wds-icon-button-color-text-standard-primary-disabled,
  var(--wds-color-text-disabled)
);
$text-standard-primary-hover: var(
  --wds-icon-button-color-text-standard-primary-hover,
  var(--wds-color-text-standard-primary)
);
$text-standard-secondary: var(
  --wds-icon-button-color-text-standard-secondary,
  var(--wds-color-text-primary)
);
$text-standard-tertiary: var(
  --wds-icon-button-color-text-standard-tertiary,
  var(--wds-color-text-primary)
);


$border-ai-primary: var(
  --wds-icon-button-color-border-ai-primary,
  transparent
);
$border-ai-primary-active: var(
  --wds-icon-button-color-border-ai-primary-active,
  transparent
);
$border-ai-primary-hover: var(
  --wds-icon-button-color-border-ai-primary-hover,
  transparent
);
$border-ai-secondary: var(
  --wds-icon-button-color-border-ai-secondary,
  transparent
);
$border-ai-secondary-active: var(
  --wds-icon-button-color-border-ai-secondary-active,
  transparent
);
$border-ai-secondary-disabled: var(
  --wds-icon-button-color-border-ai-secondary-disabled,
  var(--wds-color-text-disabled)
);
$border-ai-secondary-hover: var(
  --wds-icon-button-color-border-ai-secondary-hover,
  transparent
);
$border-ai-secondary-ring-display: var(
  --wds-icon-button-border-ai-secondary-ring-display,
  block
);
$border-ai-width: var(
  --wds-icon-button-border-ai-width,
  var(--wds-border-width-none)
);
$fill-ai-primary: var(
  --wds-icon-button-color-fill-ai-primary,
  var(--wds-color-fill-ai-primary)
);
$fill-ai-primary-active: var(
  --wds-icon-button-color-fill-ai-primary-active,
  var(--wds-color-fill-ai-primary-active)
);
$fill-ai-primary-disabled: var(
  --wds-icon-button-color-fill-ai-primary-disabled,
  var(--wds-color-fill-ai-primary-disabled)
);
$fill-ai-primary-hover: var(
  --wds-icon-button-color-fill-ai-primary-hover,
  var(--wds-color-fill-ai-primary-hover)
);
$fill-ai-secondary: var(
  --wds-icon-button-color-fill-ai-secondary,
  var(--wds-color-fill-ai-primary)
);
$fill-ai-secondary-active: var(
  --wds-icon-button-color-fill-ai-secondary-active,
  var(--wds-color-fill-ai-primary-active)
);
$fill-ai-secondary-disabled: var(
  --wds-icon-button-color-fill-ai-secondary-disabled,
  var(--wds-color-fill-standard-tertiary-disabled)
);
$fill-ai-secondary-hover: var(
  --wds-icon-button-color-fill-ai-secondary-hover,
  var(--wds-color-fill-ai-primary-hover)
);
$fill-ai-tertiary: var(
  --wds-icon-button-color-fill-ai-tertiary,
  var(--wds-color-fill-standard-tertiary)
);
$fill-ai-tertiary-active: var(
  --wds-icon-button-color-fill-ai-tertiary-active,
  transparent
);
$fill-ai-tertiary-disabled: var(
  --wds-icon-button-color-fill-ai-tertiary-disabled,
  var(--wds-color-fill-standard-tertiary)
);
$fill-ai-tertiary-hover: var(
  --wds-icon-button-color-fill-ai-tertiary-hover,
  var(--wds-color-fill-standard-tertiary)
);
$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-text-disabled-light)
);
$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-text-standard-primary-light)
);
$text-ai-secondary-disabled: var(
  --wds-icon-button-color-text-ai-secondary-disabled,
  var(--wds-color-text-disabled)
);
$text-ai-secondary-hover: var(
  --wds-icon-button-color-text-ai-secondary-hover,
  var(--wds-color-text-standard-primary-light)
);
$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-text-primary)
);
$text-ai-tertiary-disabled: var(
  --wds-icon-button-color-text-ai-tertiary-disabled,
  var(--wds-color-fill-dark-primary-disabled)
);
$text-ai-tertiary-hover: var(
  --wds-icon-button-color-text-ai-tertiary-hover,
  var(--wds-color-text-primary)
);

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

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

  &:active {
    background-color: $fill-standard-primary-active;
    border-color: $fill-standard-primary-active;
    color: $text-standard-primary-active;
  }

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

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

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

  &#{&}--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-light {
    background-color: $fill-light-primary;
    border: none;
    color: $text-light-primary;
  }

  &#{&}--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)
    );
  }

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

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

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

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

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

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

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

  &#{&}--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#{&}--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)
      );
    }
  }

  &#{&}--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)
    );
  }

  &#{&}--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))
      );
  }

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

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

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

  &#{&}--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;
  }
}