/*
 * De badge achter een naam — zie user-badge.js voor wanneer welke verschijnt.
 *
 * Opzet: drie niveaus die visueel oplopen zonder met elkaar te concurreren.
 * "Docent" is een rustig vlakje, "Geverifieerd" krijgt er een vinkje bij,
 * "Topdocent" is de enige met een volle merkkleur. Zou elke badge fel zijn, dan
 * valt geen enkele meer op — en juist die laatste is degene die iets zegt.
 *
 * Alle kleuren komen uit app/core/global.css, dus donkere modus werkt vanzelf.
 */

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  vertical-align: middle;
  padding: 0.1rem 0.45rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  /* De badge staat naast tekst die van alles kan zijn; dit houdt hem los. */
  flex: none;
}

.user-badge i {
  font-size: 0.95em;
  line-height: 1;
}

/* Alleen het icoon (krappe plekken zoals de livechat). Rond, geen tekst. */
.user-badge--compact {
  padding: 0.12rem;
  width: 1.15rem;
  height: 1.15rem;
  justify-content: center;
  gap: 0;
}
.user-badge--compact i { font-size: 0.85rem; }

/* ---- Niveau 1: Docent -------------------------------------------------------
   Rustig. Dit is het meest voorkomende geval en hoort niet te schreeuwen. */
.user-badge--teacher {
  background: var(--light-gray);
  color: var(--dark_gray);
  border: 1px solid var(--border-color);
}

/* ---- Niveau 2: Geverifieerd docent ------------------------------------------
   Het vinkje doet het werk; de achtergrond blijft ingetogen. */
.user-badge--verified {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* ---- Niveau 3: Topdocent ----------------------------------------------------
   De enige met een volle merkkleur, en daarmee de enige die van een afstand
   opvalt. Dat is precies de bedoeling. */
.user-badge--top {
  background: var(--grad-brand);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

/* ---- Beheerder --------------------------------------------------------------
   Geen onderdeel van de docentladder, dus bewust een andere kleur: dit is een
   rol, geen verdienste. */
.user-badge--admin {
  background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
  color: var(--secondary-color);
  border: 1px solid color-mix(in srgb, var(--secondary-color) 25%, transparent);
}

/* ---- Groot, voor een profielpagina ------------------------------------------
   Zet .user-badge--lg erbij waar de badge de kop van een pagina is in plaats
   van een voetnoot achter een naam. */
.user-badge--lg {
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  gap: 0.3em;
}

/* Oudere browsers zonder color-mix(): dan valt de achtergrond weg en blijft de
   rand + kleur over. Nog steeds leesbaar, alleen minder rijk. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .user-badge--verified,
  .user-badge--admin {
    background: var(--light-light-gray);
  }
}