/**
 * icons.css — іконки інтерфейсу.
 *
 * Штрихові 24×24, як у бренд-буку. Розмір, товщина штриха й колір ідуть із
 * токенів, а сама іконка — з assets/icons.svg через <use>. Тому набір можна
 * замінити цілком, не чіпаючи жодної сторінки: досить підмінити <symbol> з
 * тим самим id.
 *
 * Чому не Material Icons з CDN, як було: то шрифт із чужою мовою форм —
 * заокруглені заливки замість штриха. Поверх власного бренду це читається як
 * позичене. Плюс шрифт важить більше за 25 потрібних іконок і вимагає мережі
 * на кожному завантаженні.
 *
 * stroke: currentColor — іконка бере колір тексту навколо, тож у кнопці,
 * у меню й у панелі вона сама стає тим кольором, що треба.
 */

.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}

.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* Спрайт лежить у документі, але не малюється */
#icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}