.spr-button--small {
  --button-font-size: 0.875rem;
  --button-line-height: 1.5rem;
  --button-padding-block: var(--size-025);
  --button-padding-inline: var(--size-1);
}

.spr-button--medium {
  --button-font-size: 1rem;
  --button-line-height: 1.5rem;
  --button-padding-block: var(--size-05);
  --button-padding-inline: var(--size-15);
}

.spr-button--large {
  --button-font-size: var(--font-size-xs);
  --button-line-height: var(--line-height-heading-5);
  --button-padding-block: var(--size-1);
  --button-padding-inline: var(--size-25);

  @media (max-width: 767px) {
    --button-font-size: 1rem;
    --button-line-height: 1.5rem;
    --button-padding-block: var(--size-05);
    --button-padding-inline: var(--size-15);
  }
}

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

  width: fit-content;
}

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

  width: fit-content;

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

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

  width: fit-content;

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

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

.spr-button--secondary {
  --button-background-color: transparent;
  --button-text-color: var(--color-black);
  --button-hover-background-color: var(--color-secondary);
  --button-hover-text-color: var(--color-black);
  --button-border-color: var(--color-black);
  --button-hover-border-color: var(--color-secondary);
}

.spr-button--secondary.spr-button--dark {
  --button-text-color: var(--color-white);
  --button-border-color: var(--color-white);

  .spr-header:hover & {
    --button-text-color: var(--color-black);
    --button-border-color: var(--color-black);
  }
}

.spr-button--tertiary {
  --button-background-color: transparent;
  --button-text-color: var(--color-black);
  --button-hover-background-color: var(--color-white);
  --button-hover-text-color: var(--color-black);
  --button-border-color: var(--color-black);
  --button-hover-border-color: var(--color-white);
}

.spr-button--tertiary.spr-button--dark {
  --button-text-color: var(--color-white);
  --button-border-color: var(--color-white);
  --button-hover-background-color: var(--color-secondary);
  --button-hover-text-color: var(--color-black);
  --button-hover-border-color: var(--color-secondary);
}

.spr-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  transition: all 0.2s ease;
  text-decoration: none;
  color: var(--button-text-color);
  border: 1px 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;
  }
}

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