.button {
  outline: none;
  border: 0;
  padding: 0.8rem 1.5rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  user-select: none;
  text-decoration: none;
}

.button:hover {
  opacity: 0.8;
}

.button.primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.button.primary.inverted {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Secondary */
.button.secondary {
  background-color: transparent;
  border: 1.5px solid var(--color-primary);
}

/* Sizes */
.button.small {
  font-size: 0.6rem;
  padding: 0.5rem 1rem;
}