/*
 * Второй язык портала: переключатель в шапке и полоса состояния страницы
 * (DGT-I18N-01, 09).
 *
 * Отдельный файл, а не строки в courses-v2.css: тема github-style — чужая
 * зона, а эти два узла целиком принадлежат области i18n и переезжают вместе
 * с ней. Подключается из partials/head.html рядом с остальными таблицами.
 *
 * Цвета берутся из общих токенов (digitable.tokens.css), поэтому светлая тема
 * ничего дополнительно не требует: значения переопределяются там же.
 */

/* ------------------------------------------------------ переключатель языка */

.i18n-switcher {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* Высота 40px — не украшение, а нижняя граница попадания пальцем; на ней же
   стоит сценарий «каждый видимый элемент шапки не мельче 40px»
   (features/browser/header.feature). Остальные кнопки шапки того же роста,
   поэтому переключатель встаёт в ряд, а не выпирает из него. */
.i18n-switcher__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--digitable-border);
  border-radius: var(--digitable-radius-pill);
  color: var(--digitable-muted);
  text-decoration: none;
}

.i18n-switcher__link:hover,
.i18n-switcher__link:focus-visible {
  color: var(--digitable-white);
  background: rgba(0, 229, 229, 0.14);
}

/* Перевода этой страницы нет — ссылка ведёт на главную другого языка.
   Пунктир отличает её от обычного перехода до нажатия, а не после. */
.i18n-switcher__link--home .i18n-switcher__name,
.i18n-switcher__link--home .i18n-switcher__code {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Самоназвание языка и его код — одно и то же слово в двух длинах. Видно
   ровно одно из них: код на узком экране, полное имя на широком. Скринридер
   не участвует в этом выборе — он читает aria-label ссылки, где имя языка
   стоит целиком всегда. */
.i18n-switcher__name {
  display: none;
}

.i18n-switcher__code {
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (min-width: 900px) {
  .i18n-switcher__name {
    display: inline;
  }

  .i18n-switcher__code {
    display: none;
  }
}

/* -------------------------------------------------- полоса состояния страницы */

.i18n-notice {
  max-width: 1400px;
  margin: 12px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--digitable-border);
  border-left: 3px solid var(--digitable-yellow);
  border-radius: var(--digitable-radius-sm);
  background: var(--digitable-panel);
  color: var(--digitable-white);
  font-size: 14px;
}

/* Страница, которой в английском издании нет вовсе, — случай более сильный,
   чем невычитанный машинный перевод, и метка у него другого цвета. */
.i18n-notice--untranslated {
  border-left-color: var(--digitable-orange);
}

.i18n-notice__title {
  margin: 0 0 4px;
  font-weight: 600;
}

.i18n-notice__text {
  margin: 0;
  color: var(--digitable-muted);
}

.i18n-notice__link {
  color: var(--digitable-cyan-soft);
}

@media (max-width: 900px) {
  .i18n-notice {
    margin: 10px 12px 0;
  }
}

/* Полоса — это состояние сайта, а не текст материала: в печать и в PDF она
   не едет. */
@media print {
  .i18n-notice,
  .i18n-switcher {
    display: none;
  }
}