/* Taalschakelaar. Volgt dezelfde vormtaal als de domeinschakelaar in de rail. */

html.i18n-pending body {
  visibility: hidden;
}

.lang-switch {
  display: inline-flex;
  /* De topbalk wordt op smalle schermen een grid; zonder dit rekt de
     schakelaar mee met de kolom in plaats van om de twee knoppen te sluiten. */
  justify-self: start;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-solid);
}

.lang-option {
  min-height: 31px;
  min-width: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lang-option:hover {
  color: var(--ink);
}

.lang-option.is-active {
  background: var(--accent);
  color: var(--rail);
}

/* Op de loginkaart staat de schakelaar rechtsboven in de kop. */
.login-heading {
  position: relative;
}

.login-lang-switch {
  position: absolute;
  top: 0;
  right: 0;
}