.button-primary,
.button-secondary {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 0.25rem;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.3s ease;
  outline: none;
  cursor: pointer;
}

.button-primary:focus,
.button-secondary:focus {
  outline: 2px solid var(--border--focus);
  outline-offset: 2px;
}

.button-primary:disabled,
.button-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

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

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

.button-primary:hover:not(:disabled) {
  background-color: var(--button-primary-background--hover);
  color: var(--button-text-primary--hover);
}

.button-secondary {
  background-color: var(--button-secondary-background--default);
  color: var(--button-text-secondary--default);
  border: 2px solid var(--border-secondary);
}

.button-secondary:hover:not(:disabled) {
  background-color: var(--button-secondary-background--hover);
  color: var(--button-text-secondary--default);
}

.button-large {
  font-size: 1rem;
  padding: 1rem 3rem;
}

.button-rounded {
  border-radius: 0.5rem;
}

@media (min-width: 600px) {
  .button-large {
    font-size: 1.25rem;
    padding: 1rem 3rem;
  }
}

@media (min-width: 960px) {}

@media (min-width: 1280px) {}