.wds-Button {
  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
  --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
  --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
  --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
  --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
  --Button-border-radius: var(--radius-full);
  --Button-label-gap: var(--size-4);
  --Button-large-padding: var(--size-12) var(--size-16);
  --Button-medium-padding: var(--size-8) var(--size-12);
  --Button-small-padding: var(--size-5) var(--size-12);
  --Button-avatar-border-color: var(--color-border-neutral);
  --Button-transition-duration: 150ms;
  --Button-transition-easing: ease-in-out;
  --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
  --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
  --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
  --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
  --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
  --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
  --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
  --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
  --Button-tertiary-background: transparent;
  --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
  --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
  --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
  --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
  --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
  --Button-primary-negative-color: var(--color-contrast-overlay);
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
  --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
  --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
}
.np-theme-personal--bright-green .wds-Button {
  --Button-primary-negative-color: var(--color-white);
  --Button-secondary-negative-color: var(--color-white);
}
/* Button Styles */
.wds-Button {
  display: inline-flex;
  flex: none;
  width: auto;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--Button-background);
  border: none;
  border-radius: var(--Button-border-radius);
  color: var(--Button-color);
  cursor: pointer;
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
}
.wds-Button,
.wds-Button:hover,
.wds-Button:active,
.wds-Button:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--Button-color);
}
.wds-Button:hover {
  --Button-color: var(--Button-color-hover);
  background-color: var(--Button-background-hover);
}
.wds-Button:active {
  --Button-color: var(--Button-color-active);
  background-color: var(--Button-background-active);
}
.wds-Button.wds-Button--disabled,
.wds-Button:disabled {
  filter: none;
  mix-blend-mode: luminosity;
  opacity: 0.45;
  cursor: not-allowed;
}
.wds-Button.wds-Button--disabled,
.wds-Button:disabled,
.wds-Button.wds-Button--disabled:hover,
.wds-Button:disabled:hover,
.wds-Button.wds-Button--disabled:active,
.wds-Button:disabled:active {
  background-color: var(--Button-background);
}
.wds-Button--secondary {
  --Button-background: var(--Button-secondary-background);
  --Button-background-hover: var(--Button-secondary-background-hover);
  --Button-background-active: var(--Button-secondary-background-active);
  --Button-color: var(--Button-secondary-color);
  --Button-color-hover: var(--Button-secondary-color-hover);
  --Button-color-active: var(--Button-secondary-color-active);
}
.wds-Button--secondary-neutral {
  --Button-background: var(--Button-secondary-neutral-background);
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
  --Button-background-active: var(--Button-secondary-neutral-background-active);
  --Button-color: var(--Button-secondary-neutral-color);
  --Button-color-hover: var(--Button-secondary-neutral-color);
  --Button-color-active: var(--Button-secondary-neutral-color);
}
.wds-Button--secondary-neutral .wds-Button-icon--end {
  color: var(--Button-secondary-color);
}
.wds-Button--tertiary {
  --Button-background: var(--Button-tertiary-background);
  --Button-background-hover: var(--Button-tertiary-background-hover);
  --Button-background-active: var(--Button-tertiary-background-active);
  --Button-color: var(--Button-tertiary-color);
  --Button-color-hover: var(--Button-tertiary-color-hover);
  --Button-color-active: var(--Button-tertiary-color-active);
}
.wds-Button--tertiary .wds-Button-labelText,
.wds-Button--tertiary:hover .wds-Button-labelText,
.wds-Button--tertiary:active .wds-Button-labelText,
.wds-Button--tertiary:focus .wds-Button-labelText {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.wds-Button--negative.wds-Button--primary {
  --Button-background: var(--Button-primary-negative-background);
  --Button-background-hover: var(--Button-primary-negative-background-hover);
  --Button-background-active: var(--Button-primary-negative-background-active);
  --Button-color: var(--Button-primary-negative-color);
}
.wds-Button--negative.wds-Button--secondary {
  --Button-background: var(--Button-secondary-negative-background);
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
  --Button-background-active: var(--Button-secondary-negative-background-active);
  --Button-color: var(--Button-secondary-negative-color);
  --Button-color-hover: var(--Button-secondary-negative-color-hover);
  --Button-color-active: var(--Button-secondary-negative-color-active);
}
.wds-Button--large {
  padding: var(--Button-large-padding);
}
.wds-Button--medium {
  padding: var(--Button-medium-padding);
}
.wds-Button--medium:has(.wds-Button-avatars) {
  padding-inline-start: 8px;
  padding-inline-start: var(--size-8);
}
.wds-Button--medium:has(.wds-Button-icon--end) {
  padding-inline-end: 8px;
  padding-inline-end: var(--size-8);
}
.wds-Button--medium .wds-Button-icon--start {
  margin-inline-end: var(--Button-label-gap);
}
.wds-Button--small {
  padding: var(--Button-small-padding);
}
.wds-Button--small:has(.wds-Button-icon--start) {
  padding-inline-start: 8px;
  padding-inline-start: var(--size-8);
}
.wds-Button--small:has(.wds-Button-icon--end) {
  padding-inline-end: 8px;
  padding-inline-end: var(--size-8);
}
.wds-Button--block {
  width: 100%;
}
.wds-Button-avatars {
  display: inline-flex;
}
.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
  color: var(--Button-color);
}
.wds-Button-icon {
  display: inline-block;
}
.wds-Button-icon--md {
  --Button-iconSize: 18px;
}
.wds-Button-icon--sm {
  --Button-iconSize: 16px;
}
.wds-Button-icon svg {
  width: var(--Button-iconSize);
  height: var(--Button-iconSize);
}
.wds-Button-content {
  position: relative;
}
.wds-Button-content--loading .wds-Button-label,
.wds-Button-content--loading .wds-Button-media,
.wds-Button-content--loading .wds-Button-icon {
  visibility: hidden;
  opacity: 0;
}
.wds-Button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--Button-label-gap);
  position: relative;
}
.wds-Button-loader {
  position: absolute;
  width: 100%;
  height: 100%;
}
.wds-Button-loader .process-circle {
  stroke: var(--Button-color);
}
/* Avatar border transparency */
/* dark buttons get 20% transparency, light buttons get 12% */
.wds-Button-avatars .np-circle {
  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
}
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
}
.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
}
.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
.np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
}
[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
  scale: -1 1;
}