.button {
  min-height: 3.4rem;
  padding: 0.7rem 1.7rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.button:hover:not(:disabled) {
  transform: translateY(-0.125rem);
}

.button--primary {
  background: var(--wit);
  color: var(--donkerpaars);
  border: 0.125rem solid var(--wit);
}

.button--secondary {
  background: transparent;
  color: var(--wit);
  border: 0.125rem solid currentColor;
}

.button--dark {
  background: var(--donkerblauw);
  color: var(--wit);
  border: 0.125rem solid var(--donkerblauw);
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.68;
}