:root {
  --Button-background: var(--color-interactive-accent);
  --Button-hover-background: var(--color-interactive-accent-hover);
  --Button-active-background: var(--color-interactive-accent-active);
  --Button-color: var(--color-interactive-control);
  --Button-padding: var(--size-8) var(--size-12);
  --Button-border-radius: var(--radius-full);
  --Button-font-size: var(--font-size-16);
  --Button-line-height: var(--size-24);
  --Button-font-weight: var(--font-weight-semi-bold);
  --Button-letter-spacing: -0.011em;
  --Button-size-small-padding: 5px var(--size-12);
  --Button-size-medium-padding: var(--size-8) var(--size-12);
  --Button-size-large-padding: var(--size-12) var(--size-16);
  --Button-avatar-border-color: var(--color-border-neutral);
  --Button-secondary-background: var(--color-interactive-neutral);
  --Button-secondary-hover-background: var(--color-interactive-neutral-hover);
  --Button-secondary-active-background: var(--color-interactive-neutral-active);
  --Button-secondary-color: var(--color-interactive-primary);
  --Button-tertiary-background: var(--color-background-neutral);
  --Button-tertiary-hover-background: var(--color-background-neutral-hover);
  --Button-tertiary-active-background: var(--color-background-neutral-active);
  --Button-tertiary-color: var(--color-content-primary);
  --Button-minimal-background: transparent;
  --Button-minimal-hover-background: var(--color-background-screen-hover);
  --Button-minimal-active-background: var(--color-background-screen-active);
  --Button-minimal-color: var(--color-interactive-primary);
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
  --Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
  --Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
  --Button-primary-negative-color: var(--color-contrast);
  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
  --Button-secondary-negative-hover-background: var(--color-sentiment-negative-secondary-hover);
  --Button-secondary-negative-active-background: var(--color-sentiment-negative-secondary-active);
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
}
.np-theme-personal--dark {
  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
}
.np-theme-personal--forest-green {
  --color-interactive-neutral: rgba(159,232,112,0.2);
  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
  --color-interactive-neutral-active: rgba(236,255,224,0.2);
  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
}
.np-theme-personal--bright-green {
  --color-contrast: #FFFFFF;
  --Button-secondary-color: var(--color-interactive-control);
  --Button-secondary-negative-color: var(--color-contrast);
  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
}
/* Button Styles */
.wds-Button {
  display: inline-flex;
  flex: none;
  width: auto;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-weight: 600;
  font-weight: var(--Button-font-weight);
  font-size: 1rem;
  font-size: var(--Button-font-size);
  letter-spacing: -0.011em;
  letter-spacing: var(--Button-letter-spacing);
  line-height: 24px;
  line-height: var(--Button-line-height);
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  word-wrap: break-word;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #00a2dd;
  background-color: var(--Button-background);
  border: none;
  border-radius: 9999px;
  border-radius: var(--Button-border-radius);
  color: var(--Button-color);
  cursor: pointer;
  padding: 8px 12px;
  padding: var(--Button-padding);
}
.wds-Button:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.wds-Button:hover {
  background-color: #008fc9;
  background-color: var(--Button-hover-background);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.wds-Button:active {
  background-color: #0081ba;
  background-color: var(--Button-active-background);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.wds-Button:disabled {
  mix-blend-mode: luminosity;
  opacity: 0.45;
  cursor: not-allowed;
}
.wds-Button:disabled:hover,
.wds-Button:disabled:active {
  background-color: #00a2dd;
  background-color: var(--Button-background);
}
.wds-Button--secondary {
  --Button-background: var(--Button-secondary-background);
  --Button-hover-background: var(--Button-secondary-hover-background);
  --Button-active-background: var(--Button-secondary-active-background);
  --Button-color: var(--Button-secondary-color);
}
.wds-Button--tertiary {
  --Button-background: var(--Button-tertiary-background);
  --Button-hover-background: var(--Button-tertiary-hover-background);
  --Button-active-background: var(--Button-tertiary-active-background);
  --Button-color: var(--Button-tertiary-color);
}
.wds-Button--tertiary .wds-Button-icon--right {
  color: var(--color-interactive-primary);
}
.wds-Button--minimal {
  --Button-background: var(--Button-minimal-background);
  --Button-hover-background: var(--Button-minimal-hover-background);
  --Button-active-background: var(--Button-minimal-active-background);
  --Button-color: var(--Button-minimal-color);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.wds-Button--minimal:hover,
.wds-Button--minimal:hover:active {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.wds-Button--negative.wds-Button--primary {
  --Button-background: var(--Button-primary-negative-background);
  --Button-hover-background: var(--Button-primary-negative-hover-background);
  --Button-active-background: var(--Button-primary-negative-active-background);
  --Button-color: var(--Button-primary-negative-color);
  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
}
.wds-Button--negative.wds-Button--secondary {
  --Button-background: var(--Button-secondary-negative-background);
  --Button-hover-background: var(--Button-secondary-negative-hover-background);
  --Button-active-background: var(--Button-secondary-negative-active-background);
  --Button-color: var(--Button-secondary-negative-color);
  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
}
.wds-Button--small {
  --Button-padding: var(--Button-size-small-padding);
  --Button-line-height: 22px;
  --Button-font-size: var(--font-size-14);
  --Button-letter-spacing: -0.006em;
}
.wds-Button--small .wds-Button-icon--left {
  margin-right: 4px;
  margin-right: var(--size-4);
}
[dir="rtl"] .wds-Button--small .wds-Button-icon--left {
  margin-right: 0;
  margin-left: 4px;
  margin-left: var(--size-4);
}
.wds-Button--medium {
  --Button-padding: var(--Button-size-medium-padding);
}
.wds-Button--large {
  --Button-padding: var(--Button-size-large-padding);
}
.wds-Button--iconOnly {
  padding: 0;
}
.wds-Button--block {
  width: 100%;
}
.wds-Button-avatars {
  display: inline-flex;
  margin-right: 5px;
  margin-left: calc(4px * -1);
  margin-left: calc(var(--size-4) * -1);
}
[dir="rtl"] .wds-Button-avatars {
  margin-right: 0;
  margin-left: 5px;
}
.wds-Button-avatars .np-circle {
  --circle-border-color: var(--Button-avatar-border-color);
}
.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
  color: var(--Button-color);
}
.wds-Button-icon {
  display: inline-block;
}
.wds-Button-icon--left {
  margin-right: 8px;
  margin-right: var(--size-8);
}
[dir="rtl"] .wds-Button-icon--left {
  margin-right: 0;
  margin-left: 8px;
  margin-left: var(--size-8);
}
.wds-Button-icon--right {
  margin-left: 4px;
  margin-left: var(--size-4);
}
[dir="rtl"] .wds-Button-icon--right {
  margin-left: 0;
  margin-right: 4px;
  margin-right: var(--size-4);
}
.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;
  position: relative;
}
.wds-Button-loader {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.wds-Button-loader .process-circle {
  stroke: var(--Button-color);
}
/* RTL Styles */
[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
  transform: rotate(180deg);
}
[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
  transform: rotate(180deg);
}
