.btn-container,
.btn-container form {
  display: flex;
  row-gap: 0.5rem;
  column-gap: 1rem;
}

* + .btn-container {
  margin-top: 1rem;
}

.btn-container + * {
  margin-bottom: 1rem;
}

a.btn,
button.btn {
  --btn-border-width: 1px;

  padding: 0.5rem 1rem;
  color: var(--color-blue);
  border-width: var(--btn-border-width);
  border-style: solid;
  border-color: transparent;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--color-white);
}

a.btn-primair,
button.btn-primair {
  background-color: var(--color-blue);
  color: var(--color-white);
}

a.btn-secundair,
button.btn-secundair {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

a.btn:hover, a.btn:focus,
button.btn:hover, button.btn:focus {
  border-color: var(--color-grey);
}

a.btn-primair:hover, a.btn-primair:focus,
button.btn-primair:hover, button.btn-primair:focus {
  background-color: var(--color-dark-blue);
  border-color: var(--color-dark-blue);
}

a.btn-secundair:hover, a.btn-secundair:focus,
button.btn-secundair:hover, button.btn-secundair:focus {
  --btn-border-width: 2px;

  border-color: var(--color-dark-blue);
  padding: calc(0.5rem - calc(var(--btn-border-width) - 1px)) calc(1rem - calc(var(--btn-border-width) - 1px));
}