/*
 * [zoomagazin] Иконки группировок в выпадающем меню — в цвет текста.
 *
 * ЗАЧЕМ. У группировок каталожного меню (Харчування, Догляд та гігієна, …)
 * должны стоять аккуратные одноцветные иконки возле заголовков.
 *
 * ПОЧЕМУ МАСКА, А НЕ <img> С ФИЛЬТРОМ. Маска красит иконку в `currentColor`,
 * то есть ровно в цвет заголовка группы — и в светлой теме, и в тёмной, без
 * отдельных правил и без подгонки оттенка. Вариант с `filter: brightness(0)`
 * давал бы чистый чёрный (#000), который не совпадает с цветом текста темы,
 * и требовал бы второго правила с `invert(1)` для тёмной.
 *
 * Файл иконки при этом может быть любого цвета: от него берётся только форма.
 *
 * ⚠️ Селектор повторяет вендорный один в один (`#additional-menu` + два класса)
 * — иначе не перебьёт. Работает за счёт порядка подключения: мод вставляет
 * addStyle прямо перед `$data['styles'] = $this->document->getStyles()`
 * в шапке, то есть после всех стилей темы.
 */

.zm-menu-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
	/* цвет заголовка группы, каким бы он ни был */
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex: none;
}

/* Заголовок группы у темы — блочная ссылка; выравниваем иконку с первой
   строкой текста, чтобы длинные названия переносились под текст, а не под
   иконку. */
.nsmenu-parent-title.zm-has-icon {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
}

.nsmenu-parent-title.zm-has-icon .zm-menu-icon {
	margin-top: 2px;
	vertical-align: baseline;
}