.button {
  display: inline-block;
  padding: var(--space-xxs) var(--space-l);
  border-radius: calc((var(--space-xxs) * 2) + var(--font-size-xxl));
  background-origin: border-box;
  background-color: transparent;
  border: solid 2px transparent;
  font-weight: 500;
  font-size: var(--font-size-s);
  line-height: var(--font-size-xxl);
  text-transform: uppercase;
  letter-spacing: .25px;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: filter 400ms, color 200ms, opacity 400ms;
  white-space: nowrap;

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

.button--primary {
  color: var(--color-text-inverted);
  background-color: var(--color-primary);

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

  &.disabled {
    filter: saturate(0);
    opacity: .5;
    transition: filter 400ms, opacity 400ms;
  }
}

.button--secondary {
  color: var(--color-text-inverted);
  background-color: var(--color-secondary);

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

.button--subtle {
  color: var(--color-text);
  background-color: var(--color-subtle);

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