:root {
  --achtergrond: var(--mk-achtergrond);
  --vlak: var(--mk-vlak);
  --vlak-2: var(--mk-vlak-zacht);
  --vlak-3: var(--mk-kop);
  --tekst: var(--mk-tekst);
  --tekst-zacht: var(--mk-tekst-zacht);
  --tekst-zwak: var(--mk-tekst-zacht);
  --scheiding: var(--mk-lijn);
  --lijn-zacht: var(--mk-lijn);
  --accent: var(--mk-merk);
  --accent-zacht: var(--mk-merk-zacht);
  --accent-tekst: var(--mk-op-merk);
  --merk: var(--mk-woord-112);
  --open: var(--mk-melding-open);
  --rijdt: var(--mk-voertuig-aanrijdend);
  --plaats: var(--mk-voertuig-ter-plaatse);
  --klaar: var(--mk-voertuig-vrij);
  --terug: var(--mk-voertuig-vrij);
  --gevaar: var(--mk-fout);
  --gevaar-zacht: var(--mk-fout-zacht);
  --zwaailicht: var(--mk-politie);
  --kies: var(--mk-selectie);
  --schaduw-1: var(--mk-schaduw-1);
  --schaduw-2: var(--mk-schaduw-2);
  --schaduw-3: var(--mk-schaduw-3);
  --focus: var(--mk-focus);
  --rond: var(--mk-rond-m);
}

[hidden] {
  display: none !important;
}

a {
  color: var(--mk-merk);
}

.icoon {
  width: 14px;
  height: 14px;
  flex: none;
  display: inline-block;
  vertical-align: -2px;
}

.mk-knop[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--mk-vlak-zacht);
  border-color: var(--mk-lijn);
  color: var(--mk-tekst-zacht);
}

.mk-knop-hoofd[disabled] .mk-sneltoets {
  color: inherit;
}

.veld {
  display: grid;
}

.veld .mk-label {
  margin-top: var(--mk-ruimte-4);
}

.veld .mk-veld {
  min-height: 26px;
}

.melding-fout {
  margin: var(--mk-ruimte-4) 0 0;
  padding: var(--mk-ruimte-2) var(--mk-ruimte-4);
  border: 1px solid var(--mk-fout);
  border-radius: var(--mk-rond-s);
  background: var(--mk-fout-zacht);
  color: var(--mk-fout);
}

.toast-plek {
  position: fixed;
  right: var(--mk-ruimte-5);
  bottom: 30px;
  display: grid;
  gap: var(--mk-ruimte-2);
  z-index: 50;
  pointer-events: none;
}

.toast {
  min-width: 240px;
  padding: var(--mk-ruimte-3) var(--mk-ruimte-5);
  border: 1px solid var(--mk-lijn);
  border-radius: var(--mk-rond-s);
  background: var(--mk-vlak);
  color: var(--mk-tekst);
  box-shadow: var(--mk-schaduw-2);
}

.toast-fout {
  border-color: var(--mk-fout);
  background: var(--mk-fout-zacht);
  color: var(--mk-fout);
}

dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--mk-lijn);
  border-radius: var(--mk-rond-l);
  background: var(--mk-vlak);
  color: var(--mk-tekst);
  box-shadow: var(--mk-schaduw-3);
}

dialog::backdrop {
  background: rgba(9, 13, 18, 0.45);
}

.dialoog {
  display: grid;
}

.dialoog > h2 {
  margin: 0;
  padding: var(--mk-ruimte-2) var(--mk-ruimte-4);
  min-height: var(--mk-regel);
  background: var(--mk-kop);
  font-size: var(--mk-maat-m);
}

.dialoog > p,
.dialoog > .veld,
.dialoog > .melding-fout,
.dialoog > .linkvak,
.dialoog > .wachtwoord-groot {
  margin-left: var(--mk-ruimte-5);
  margin-right: var(--mk-ruimte-5);
}

.dialoog > p {
  margin-top: var(--mk-ruimte-5);
  margin-bottom: 0;
}

.dialoog-knoppen {
  display: flex;
  justify-content: flex-end;
  gap: var(--mk-ruimte-3);
  margin-top: var(--mk-ruimte-5);
  padding: var(--mk-ruimte-3) var(--mk-ruimte-4);
  background: var(--mk-vlak-zacht);
  border-top: 1px solid var(--mk-lijn);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}