.button {
  display: inline-block;
  padding: var(--space-xxs) var(--space-m);
  border-radius: var(--border-radius);
  background-origin: border-box;
  background-color: transparent;
  border: solid 2px transparent;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: filter 400ms, color 200ms;
  white-space: nowrap;

  &:hover,
  &:focus,
  &:focus-within,
  &:active {
    transition: filter 250ms, color 200ms;
  }
}

.button--primary {
  color: var(--color-text-inverted);
  background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));

  &:hover,
  &:focus,
  &:focus-within,
  &:active {
    color: var(--color-text-inverted);
    filter: saturate(1.4) brightness(115%);
  }
}

.button--secondary {
  color: var(--color-text-inverted);
  background-image: linear-gradient(to right, var(--color-secondary), var(--color-secondary-rotate));

  &:hover,
  &:focus,
  &:focus-within,
  &:active {
    color: var(--color-text-inverted);
    filter: saturate(1.2) brightness(110%);
  }
}

.button--subtle {
  color: var(--color-text);
  background-image: linear-gradient(to right, var(--color-subtle), var(--color-subtle-rotate));

  &:hover,
  &:focus,
  &:focus-within,
  &:active {
    color: var(--color-text);
    filter: saturate(1.2) brightness(110%);
  }
}