.spr-button--primary,
.spr-rich-text a.button--primary {
  --button-border-color: var(--color-secondary-dark);
  --button-hover-border-color: var(--color-secondary-lighter);
}

.spr-button--primary.spr-button--dark {
  --button-background-color: #fff;
  --button-text-color: var(--color-primary-dark);
}

.spr-button--secondary,
.spr-rich-text a.button--secondary {
  --button-background-color: transparent;
  --button-text-color: var(--color-secondary-dark);
  --button-hover-text-color: var(--color-secondary-dark);
  --button-border-color: var(--color-secondary-dark);
  --button-hover-border-color: var(--color-secondary-dark);
  --button-hover-background-color: var(--color-secondary-lighter);
}

.spr-button--tertiary,
.spr-rich-text a.button--tertiary {
  --button-background-color: transparent;
  --button-hover-background-color: transparent;
  --button-text-color: var(--color-secondary-dark);
  --button-hover-text-color: var(--color-secondary);
  --button-border-color: var(--color-secondary-dark);
  --button-hover-border-color: var(--color-secondary);
  --button-border-radius: 0;

  border: unset !important;
  border-block-end: var(--button-border-width) solid currentColor !important;
}

.spr-button--tertiary.spr-button--is-disabled {
  --button-text-color: var(--color-primary-dark);
  --button-border-color: : var(--color-primary-dark);
}

.spr-button--secondary.spr-button--dark {
  --button-text-color: #fff;
  --button-border-color: #fff;
}

.spr-button--small {
  --button-font-size: 0.875rem;
  --button-line-height: 1rem;
  --button-padding-block: 0.5rem;
  --button-padding-inline: 0.75rem;

  @media (min-width: 62rem) {
    min-inline-size: var(--button-min-inline-size);
  }
}

.spr-button--medium {
  --button-font-size: 1rem;
  --button-line-height: 1rem;
  --button-padding-block: 0.6875rem;
  --button-padding-inline: 1rem;
  --button-min-inline-size: 12rem;

  @media (min-width: 62rem) {
    min-inline-size: var(--button-min-inline-size);
  }
}

.spr-button--large {
  --button-font-size: 1.125rem;
  --button-line-height: 1rem;
  --button-padding-block: 0.6875rem;
  --button-padding-inline: 1.25rem;
  --button-min-inline-size: 12.875rem;

  @media (min-width: 62rem) {
    min-inline-size: var(--button-min-inline-size);
  }
}

.spr-button--small.spr-button--icon-only {
  --button-padding-inline: 0.6875rem;

  inline-size: fit-content;
  min-inline-size: unset;
}

.spr-button--medium.spr-button--icon-only {
  --button-padding-inline: 0.6875rem;

  inline-size: fit-content;
  min-inline-size: unset;

  @media (min-width: 48rem) {
    --button-padding-inline: 0.9375rem;
  }
}

.spr-button--large.spr-button--icon-only {
  --button-padding-inline: 0.6875rem;

  inline-size: fit-content;
  min-inline-size: unset;

  @media (min-width: 48rem) {
    --button-padding-inline: 1.0625rem;
  }
}

.spr-button--is-disabled {
  pointer-events: none;
  opacity: 0.2;
}

.spr-button,
.spr-rich-text a.button--primary,
.spr-rich-text a.button--secondary,
.spr-rich-text a.button--tertiary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  text-decoration: none;
  color: var(--button-text-color);
  border: var(--button-border-width) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);

  &:hover {
    color: var(--button-hover-text-color);
    border-color: var(--button-hover-border-color);
    background-color: var(--button-hover-background-color);
  }

  &:focus-visible {
    outline-offset: 0.25rem;
  }

  /* TODO: overrides */
  .spr-icon--20 {
    @media (max-width: 767px) {
      inline-size: 1rem;
      height: 1rem;
    }
  }

  @media (min-width: 48rem) {
    inline-size: fit-content;
  }
}

.spr-button--before,
.spr-button--after {
  gap: var(--button-icon-gap);
}

.spr-rich-text a.button--primary,
.spr-rich-text a.button--secondary,
.spr-rich-text a.button--tertiary {
  display: inline;
}