/* Button */
.interact-button {
  --btn-bg: var(--btn-primary-bg);
  --btn-bg-hover: var(--btn-primary-bg-hover);
  --btn-bg-active: var(--btn-primary-bg-active);
  --btn-border: var(--btn-primary-border, 1px solid transparent);
  --btn-border-hover: var(--btn-primary-border-hover);
  --btn-text-color: var(--btn-primary-text);
  --btn-text-hover: var(--btn-primary-text-hover, var(--btn-primary-text));
  --btn-focus-ring-inner: var(--btn-primary-focus-inner);
  --btn-focus-ring-outer: var(--btn-primary-focus-outer);
  --btn-bg-disabled: var(--btn-disabled-bg);
  --btn-text-disabled: var(--btn-disabled-text);
  --btn-border-disabled: var(--btn-disabled-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: var(--font-weight-semibold, 600);
  font-family: var(--font-family-base);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
  text-align: center;
  cursor: pointer;
  border: var(--btn-border, 1px solid transparent);
  min-height: var(--button-height);
  padding-inline: var(--button-padding-x);
  color: var(--btn-text-color, currentColor);
  background-color: var(--btn-bg, transparent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.button__content {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
}

.button__icon {
  display: inline-flex;
  width: var(--sizing-20);
  height: var(--sizing-20);
}

.button__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.button__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.interact-button.button--full-width {
  width: 100%;
}

.interact-button:hover {
  background-color: var(--btn-bg-hover, var(--btn-bg, transparent));
  border-color: var(--btn-border-hover, currentColor);
  color: var(--btn-text-hover, var(--btn-text-color, currentColor));
}

.interact-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--btn-focus-ring-inner),
    0 0 0 5px var(--btn-focus-ring-outer);
}

.interact-button:disabled,
.interact-button[aria-disabled='true'] {
  background-color: var(--btn-bg-disabled, var(--btn-bg, transparent));
  color: var(--btn-text-disabled, var(--btn-text-color, currentColor));
  border-color: var(--btn-border-disabled, var(--btn-border-hover, currentColor));
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

/* Shared button variants */
.interact-button.button--primary {
  --btn-bg: var(--btn-primary-bg);
  --btn-bg-hover: var(--btn-primary-bg-hover);
  --btn-bg-active: var(--btn-primary-bg-active);
  --btn-text-color: var(--btn-primary-text);
  --btn-text-hover: var(--btn-primary-text-hover);
  --btn-focus-ring-inner: var(--btn-primary-focus-inner);
  --btn-focus-ring-outer: var(--btn-primary-focus-outer);
  --btn-border: 1px solid var(--btn-primary-border);
  --btn-border-hover: var(--btn-primary-border-hover);
}

.interact-button.button--primary-light {
  --btn-bg: var(--btn-primary-light-bg);
  --btn-bg-hover: var(--btn-primary-light-bg-hover);
  --btn-bg-active: var(--btn-primary-light-bg-active);
  --btn-text-color: var(--btn-primary-light-text);
  --btn-text-hover: var(--btn-primary-light-text-hover);
  --btn-focus-ring-inner: var(--btn-primary-light-focus-inner);
  --btn-focus-ring-outer: var(--btn-primary-light-focus-outer);
  --btn-border: 1px solid var(--btn-primary-light-border);
  --btn-border-hover: var(--btn-primary-light-border-hover);
}

.interact-button.button--secondary {
  --btn-bg: var(--btn-secondary-bg);
  --btn-bg-hover: var(--btn-secondary-bg-hover);
  --btn-bg-active: var(--btn-secondary-bg-active);
  --btn-text-color: var(--btn-secondary-text);
  --btn-text-hover: var(--btn-secondary-text-hover);
  --btn-focus-ring-inner: var(--btn-secondary-focus-inner);
  --btn-focus-ring-outer: var(--btn-secondary-focus-outer);
  --btn-border: 1px solid var(--btn-secondary-border);
  --btn-border-hover: var(--btn-secondary-border-hover);
}

.interact-button.button--info {
  --btn-bg: var(--btn-info-bg);
  --btn-bg-hover: var(--btn-info-bg-hover);
  --btn-bg-active: var(--btn-info-bg-active);
  --btn-text-color: var(--btn-info-text);
  --btn-text-hover: var(--btn-info-text-hover);
  --btn-focus-ring-inner: var(--btn-info-focus-inner);
  --btn-focus-ring-outer: var(--btn-info-focus-outer);
  --btn-border: 1px solid var(--btn-info-border);
  --btn-border-hover: var(--btn-info-border-hover);
}

.interact-button.button--subtle {
  --btn-bg: var(--btn-subtle-bg);
  --btn-bg-hover: var(--btn-subtle-bg-hover);
  --btn-bg-active: var(--btn-subtle-bg-active);
  --btn-text-color: var(--btn-subtle-text);
  --btn-text-hover: var(--btn-subtle-text-hover);
  --btn-focus-ring-inner: var(--btn-subtle-focus-inner);
  --btn-focus-ring-outer: var(--btn-subtle-focus-outer);
  --btn-border: 1px solid var(--btn-subtle-border);
  --btn-border-hover: var(--btn-subtle-border-hover);
  --btn-bg-disabled: transparent;
  --btn-border-disabled: transparent;
}

.interact-button.button--subtle-white {
  --btn-bg: var(--btn-subtle-white-bg);
  --btn-bg-hover: var(--btn-subtle-white-bg-hover);
  --btn-bg-active: var(--btn-subtle-white-bg-active);
  --btn-text-color: var(--btn-subtle-white-text);
  --btn-text-hover: var(--btn-subtle-white-text-hover);
  --btn-focus-ring-inner: var(--btn-subtle-white-focus-inner);
  --btn-focus-ring-outer: var(--btn-subtle-white-focus-outer);
  --btn-border: 1px solid var(--btn-subtle-white-border);
  --btn-border-hover: var(--btn-subtle-white-border-hover);
  --btn-bg-disabled: transparent;
  --btn-border-disabled: transparent;
}

.interact-button.button--outline {
  --btn-bg: var(--btn-outline-bg);
  --btn-bg-hover: var(--btn-outline-bg-hover);
  --btn-bg-active: var(--btn-outline-bg-active);
  --btn-text-color: var(--btn-outline-text);
  --btn-text-hover: var(--btn-outline-text-hover);
  --btn-focus-ring-inner: var(--btn-outline-focus-inner);
  --btn-focus-ring-outer: var(--btn-outline-focus-outer);
  --btn-border: 1px solid var(--btn-outline-border);
  --btn-border-hover: var(--btn-outline-border-hover);
}

/* Shared button sizes */
.interact-button.button--small {
  --button-height: var(--btn-small-height, 40px);
  --button-padding-x: var(--btn-small-padding-x, 20px);
  --bubble-size: var(--btn-small-bubble-size, 40px);
  font-size: var(--btn-small-font-size, 16px);
}

.interact-button.button--medium {
  --button-height: var(--btn-medium-height, 52px);
  --button-padding-x: var(--btn-medium-padding-x, 32px);
  --bubble-size: var(--btn-medium-bubble-size, 52px);
  font-size: var(--btn-medium-font-size, 16px);
}

.interact-button.button--large {
  --button-height: var(--btn-large-height, 64px);
  --button-padding-x: var(--btn-large-padding-x, 40px);
  --bubble-size: var(--btn-large-bubble-size, 64px);
  font-size: var(--btn-large-font-size, 16px);
}

/* Primary button on brand-tertiary bg: hover color (#723c57) matches the card bg,
   so use a darker plum to keep the button visible on hover. */
.has-brand-tertiary-background-color .interact-button.button--primary {
  --btn-bg-hover: var(--color-plum-700, #361328);
  --btn-border-hover: var(--color-plum-700, #361328);
}