.wunder-button {
  --color-button-primary-text: var(--color-white);
  --color-button-secondary-background: var(--color-gray-aaaaaa-20);
  --color-button-secondary-text: var(--color-black);
  --color-button-neutral-border: var(--color-gray-aaaaaa-40);
  --color-button-neutral-text: var(--color-black);
  --color-button-disabled-background: var(--color-gray-bbbbbb-15);
  --color-button-disabled-text: var(--color-gray-aaaaaa-45);

  border-radius: calc(100rem / 50);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* white-space: pre-wrap; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.wunder-button.square-style {
  border-radius: calc(20rem / 50);
}

.wunder-button.full-style {
  border-radius: 0;
}

.wunder-button.size-large {
  width: 100%;
  padding: calc(50rem / 50) 0;
  font-size: calc(56rem / 50);
  font-weight: 700;
  line-height: calc(80rem / 50);
}

.wunder-button.size-medium {
  gap: calc(19rem / 50);
  padding: calc(51.5rem / 50) calc(181rem / 50);
  font-size: calc(50rem / 50);
  font-weight: 700;
  line-height: calc(56.75rem / 50);
}

.wunder-button.size-small {
  gap: calc(10rem / 50);
  padding: calc(25rem / 50) calc(35rem / 50) calc(20rem / 50);
  font-size: calc(44rem / 50);
  font-weight: 700;
  line-height: normal;
}

.wunder-button.variant-primary {
  border: calc(3rem / 50) solid transparent;
  color: var(--color-button-primary-text);
}

.wunder-button.variant-secondary {
  border: calc(3rem / 50) solid transparent;
  background: var(--color-button-secondary-background) !important;
  color: var(--color-button-secondary-text);
}

.wunder-button.variant-neutral {
  border: calc(3rem / 50) solid var(--color-button-neutral-border);
  color: var(--color-button-neutral-text);
}

.wunder-button.blue.variant-primary {
  background: var(--color-blue);
}

.wunder-button.blue.variant-lower {
  border: calc(3rem / 50) solid var(--color-blue);
  color: var(--color-blue);
}

.wunder-button.red.variant-primary {
  background: var(--color-red);
}

.wunder-button.red.variant-lower {
  border: calc(3rem / 50) solid var(--color-red);
  color: var(--color-red);
}

.wunder-button.mint.variant-primary {
  background: var(--color-mint);
}

.wunder-button.mint.variant-lower {
  border: calc(3rem / 50) solid var(--color-mint);
  color: var(--color-mint);
}

.wunder-button.purple.variant-primary {
  background: var(--color-purple);
}

.wunder-button.purple.variant-lower {
  border: calc(3rem / 50) solid var(--color-purple);
  color: var(--color-purple);
}

.wunder-button.green.variant-primary {
  background: var(--color-green);
}

.wunder-button.green.variant-lower {
  border: calc(3rem / 50) solid var(--color-green);
  color: var(--color-green);
}

.wunder-button.yellow.variant-primary {
  background: var(--color-yellow);
}

.wunder-button.yellow.variant-lower {
  border: calc(3rem / 50) solid var(--color-yellow);
  color: var(--color-yellow);
}

.wunder-button.yellowElec.variant-primary {
  background: var(--color-yellowElec);
}

.wunder-button.yellowElec.variant-lower {
  border: calc(3rem / 50) solid var(--color-yellowElec);
  color: var(--color-yellowElec);
}

.wunder-button.raffle.variant-primary {
  background: var(--color-raffle);
}

.wunder-button.raffle.variant-lower {
  border: calc(3rem / 50) solid var(--color-raffle);
  color: var(--color-raffle);
}

.wunder-button.raffleSub.variant-primary {
  background: var(--color-raffleSub);
}

.wunder-button.raffleSub.variant-lower {
  border: calc(3rem / 50) solid var(--color-raffleSub);
  color: var(--color-raffleSub);
}

.wunder-button:disabled {
  background: var(--color-button-disabled-background) !important;
  color: var(--color-button-disabled-text) !important;
}

.wunder-button.variant-lower:disabled {
  border-color: transparent;
}

.wunder-button.variant-neutral:disabled {
  border-color: transparent;
}