/*
  ИКОНКИ. Один файл на витрину и на кабинет.

  Подключается статикой в обеих оболочках (`layouts/showcase.blade.php` и
  `admin.blade.php`), а не через Vite: витрина сборку в критический путь не
  ставит (steering `seo.md`), и вторая копия правил разошлась бы с первой.

  Разметку иконок собирают `App\Meta\Icons` (Blade) и `data/ui-icons.js` (Vue)
  из одного набора `resources/icons/ui.json`.
*/

/*
  Базовый размер — по шрифту, а не в пикселях: иконка стоит в строке рядом со
  словом и обязана расти вместе с ним. Именно этого не умели эмодзи, которые
  она заменила.
*/
.ic {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.2em;
}

/* Размеры для мест, где иконка — не буква, а объект. */
.ic-lg {
    width: 26px;
    height: 26px;
    vertical-align: middle;
}

.ic-xl {
    width: 34px;
    height: 34px;
    vertical-align: middle;
}

/*
  Залитые иконки (звезда рейтинга): у них `fill` уже стоит на пути, поэтому
  обводка только испортила бы форму.
*/
.ic-fill {
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    stroke: none;
}

/*
  Иконки для псевдоэлементов.

  Обычно иконка — элемент разметки, и этот файл только задаёт ей размер. Но
  есть места, где рисовать нечем: `::after` на образце цвета, галочка на
  переключателе. Раньше там стояли символы шрифта («✎»), и выглядели они у
  каждой платформы по-своему, а кое-где не рисовались вовсе.

  Маска, а не `background-image`: так иконка красится `background`, то есть
  подчиняется теме, как и все остальные.
*/
:root {
    --ic-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.2 3.9l3.9 3.9L8.4 19.5l-4.9 1 1-4.9z'/%3E%3Cpath d='M14.2 5.9l3.9 3.9'/%3E%3C/svg%3E");
}