/*
 * klas-docentknop.css — de ingang naar het live docentbord.
 *
 * Eigen bestandje omdat deze knop op drie plekken staat die geen stylesheet delen:
 * de room (eigen css, geen main.css), de catalogus op de homepage en het
 * docentdashboard. De kleurtokens hebben daarom een terugval op die van de room.
 *
 * De bijbehorende logica staat in js/klas-docentknop.js.
 */

.klas-docentlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--cyan, var(--accent, #38e28a));
  border-radius: 5px;
  color: var(--cyan, var(--accent, #38e28a));
  font: 600 13px/1.5 inherit;
  text-decoration: none;
  white-space: nowrap;
}

.klas-docentlink:hover,
.klas-docentlink:focus-visible {
  background: var(--cyan-dim, rgba(56, 226, 138, 0.14));
  color: var(--cyan, var(--accent, #38e28a));
}

/* Een flex- of gridcontainer om de knop heen wint anders van [hidden]. Dezelfde
   valkuil die de klassessies eerder al opleverde; zie docs/room01-live-board.md. */
.klas-docentlink[hidden] {
  display: none;
}

/* Op een modulekaart: onder de kaart, niet erover, zodat de kaartlink zelf
   onaangeroerd blijft. */
.module-card__docent {
  margin: 0 16px 16px;
}