.btn {
  --color-offset: 8;
  --btn-bg: transparent;
  --btn-color: inherit;
  background-color: var(--btn-bg);
  border: .0625rem solid;
  color: var(--btn-color);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: .75rem 1.5rem;
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-decoration: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin: 0 1rem 0 0;
}

/* Gap below a button unless it's the last child (e.g. stacked buttons). */
.btn {
  margin-block-end: 1rem;
}

/* Additions */
/* I want the arrow to be 1.5em, but this messes up the default height, instead I'll scale it */
.btn-arrow::after {
  content: "";
  width: 1em;
  height: 1em;
  transform: scale(1.5) translate(0.125em, -0.0125em);
  background-color: currentColor;
  -webkit-mask: url("../../svg/arrow-forward.svg") no-repeat center / contain;
  mask: url("../../svg/arrow-forward.svg") no-repeat center / contain;
}

/* Variants */
.btn-primary {
  --btn-bg: var(--color-green-dark);
  border-color: var(--btn-bg);
  background-color: var(--btn-bg);
  color: var(--color-white);

  &:hover {
    --btn-bg: #194320;
    color: var(--color-white);
  }
}

.btn-secondary {
  --btn-color: var(--color-green-dark);

  &:hover {
    --btn-bg: #EEF5EB;
  }
}

.btn-link {
  padding-inline: 0;
  font-family: var(--font-sans-serif);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-link);
  border: none;
}

/* Surface-awareness */
.bg-green-dark {
  & .btn-primary {
    --btn-bg: var(--color-green-light);
    color: var(--color-black);

    &:hover {
      --btn-bg: var(--color-green);
    }
  }
}