@import "/style/global.css";

button {
  appearance: none;
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  font-weight: 700;
  padding: 0.7em 1.4em;
  cursor: pointer;
  box-shadow: var(--shadow-box-under);
  transition: background-color 0.3s ease-in-out;
}

button.primary {
  /* background: linear-gradient(160deg, var(--accent), var(--accent-2)); */
  background-color: var(--accent);
  box-shadow: var(--shadow-box-under-btn);
}

button.secondary {
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

button:hover {
  background-color: var(--text);
  color: var(--bg);
}

button.primary:hover {
  background-color: var(--accent-2);
  color: var(--text);
}
button.secondary:hover {
  background-color: var(--error);
  color: var(--text);
}