/*
  Переключатель языка.

  Отдельный файл, потому что он нужен и публичным страницам (base.html,
  где загружен app.css), и кабинету (base_app.html, где загружен teach.css).
  Общего слоя компонентов у них нет: пересекаются только tokens.css
  и fonts.css, а это переменные и шрифты, компоненту там не место.
  Дублировать тридцать строк в двух файлах — это два места, которые
  разъедутся, и разъедутся молча.

  Цвета берутся из локальных переменных: на бумаге и на тёмной раме
  шапки нужны разные, а разметка и раскладка одни и те же. Значения
  для рамы переопределяет teach.css одной строкой.
*/
.lang{
  --lang-fg:var(--muted);
  --lang-edge:var(--edge);
  /* --chip-* держат свой цвет в обеих темах — ровно затем, чтобы текст
     на заливке не слепнул при переключении. См. tokens.css. */
  --lang-on-bg:var(--chip-bg);
  --lang-on-fg:var(--chip-fg);

  display:inline-flex;flex:none;gap:1px;
  border:1px solid var(--lang-edge);border-radius:var(--r-sm);
  padding:1px;background:transparent;
}
.lang button{
  display:inline-flex;align-items:center;gap:.35rem;
  /* 40, а не 44: контрол стоит в шапке, где высота строки дороже всего,
     и промах по нему ничего не портит — переключается обратно одним
     нажатием. У кнопок отметки в журнале сорок четыре сохранены. */
  min-height:40px;padding:0 .5rem;
  font:inherit;font-size:var(--t-sm);line-height:1;cursor:pointer;
  background:none;border:0;border-radius:calc(var(--r-sm) - 2px);
  color:var(--lang-fg);opacity:.8;
}
.lang button:hover{opacity:1}
.lang button[aria-current]{
  background:var(--lang-on-bg);color:var(--lang-on-fg);opacity:1;
  font-weight:700;cursor:default;
}
.lang__f{
  display:block;flex:none;width:21px;height:15px;border-radius:2px;
}

/* Узкий телефон: остаются флаги и первая буква. Слово целиком
   («Русский», «English») в шапку рядом с меню и выходом не помещается
   ни на одном экране уже, а флага без подписи мы не оставляем. */
@media(max-width:400px){
  .lang button{padding:0 .4rem;gap:.25rem}
}