button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
  user-select: none;

  transition: 120ms ease transform, 120ms ease background-color,
    120ms ease color;
}

button.primary {
  background-color: var(--secondary-color);
  background: linear-gradient(
    0,
    var(--secondary-color) 50%,
    var(--tertiary-color) 100%
  );
  color: #000;
}

button.primary:active {
  background-color: var(--tertiary-color);
  transform: scale(0.95);
}

button[disabled] {
  background-color: #555;
  background: #555;
  color: #ccc;
  pointer-events: none;
}