/* Ссылка. Макет: обычная чёрная, hover и active фиолетовые с подчёркиванием, disabled серая.
   Подчёркивание всегда есть, но прозрачное: так цвет и подчёркивание появляются плавно. */

.link{
  color:var(--ink);
  font-family:var(--font);font-weight:var(--fw-black);font-size:var(--link-fs,22px);line-height:1.25;
  text-decoration:underline;text-decoration-color:var(--purple-clear);
  text-decoration-thickness:var(--ul-thick);text-underline-offset:var(--ul-offset);
  transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.link:hover,
.link:active,
.link[aria-current="page"],
.link.is-hover{color:var(--purple);text-decoration-color:var(--purple)}

.link[aria-disabled="true"]{color:var(--gray-hint);text-decoration-color:var(--purple-clear);pointer-events:none}

/* Переключатель языка: флаг и название. На hover: жирнее, фиолетовое, подчёркнутое, как остальные ссылки.
   Второй, невидимый, жирный экземпляр текста держит ширину, чтобы ничего не дёргалось. */
.lang{
  display:inline-flex;align-items:center;gap:.4em;
  color:var(--ink);text-decoration:none;
  font-family:var(--font);font-weight:var(--fw-semibold);text-transform:uppercase;
  transition:color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.lang__flag{display:block;flex:none;width:1.1em;height:.79em}
.lang__t{display:inline-grid}
.lang__t > span{grid-area:1 / 1;text-decoration:underline;text-decoration-color:var(--purple-clear);
  text-decoration-thickness:var(--ul-thick);text-underline-offset:var(--ul-offset);
  transition:text-decoration-color var(--dur) var(--ease)}
.lang__t > span + span{visibility:hidden;font-weight:var(--fw-black);text-decoration:none}
.lang:hover,.lang:active{color:var(--purple)}
.lang:hover .lang__t > span:first-child,
.lang:active .lang__t > span:first-child{font-weight:var(--fw-black);text-decoration-color:var(--purple)}