/* Link — текстовая ссылка (лёгкий аналог кнопки).
   Значения только через токены (tokens.css). Различие состояний — только цвет
   текста/иконок (подчёркивания нет ни в одном варианте).

   Анатомия: [Plus] · text · [Plus]  (flex, gap, items-center).
   Иконки-слоты (leftIcon/rightIcon) опциональны; по умолчанию обе есть.
   Цвет ставится на .link (color: var(--color-…)); иконки наследуют его через
   currentColor, текст — через inherit. */

.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  /* Inter Variable по умолчанию сужает глифы осью opsz против статического
     Inter в Figma — отключаем (приём accordion/blockquote). */
  font-optical-sizing: none;
}

.link__text { white-space: nowrap; }

.link__icon { flex: 0 0 auto; display: block; }
/* icon-plus.svg нормализован в viewBox 24 со stroke-width 1.6; в Figma плюс
   отрисован в viewBox 16 (stroke 1.6). Чтобы толщина линии совпала на любом
   размере, компенсируем масштаб: 1.6 × 24/16 = 2.4 (приём breadcrumbs). */
.link__icon path { stroke-width: 2.4; }

/* Размеры: gap контейнера + сторона иконки */
.link--xs { gap: var(--spacing-4); }
.link--s  { gap: var(--spacing-4); }
.link--m  { gap: var(--spacing-8); }
.link--xs .link__icon { width: 12px; height: 12px; }
.link--s  .link__icon { width: 16px; height: 16px; }
.link--m  .link__icon { width: 16px; height: 16px; }

/* Disabled — некликабельна */
.link--disabled { cursor: default; pointer-events: none; }

/* ---- Живой режим (демо): цвет реагирует на реальные :hover/:active/:focus ----
   Наборы цветов состояний приходят токенами через CSS-переменные на элементе:
   --link-c (Default), --link-h (Hover & Focused), --link-a (Active). */
.link--live { color: var(--link-c); transition: color .12s ease; }
.link--live:hover,
.link--live:focus-visible { color: var(--link-h); }
.link--live:active { color: var(--link-a); }
.link--live:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; border-radius: 2px; }