/* =============================================================================
assets/css/icons.css — система иконок Drinkit (SVG через CSS mask).
Иконки — одноцветные, наследуют currentColor. data URI без внешних файлов.
Использование:
========================================================================== */
/* Базовый контейнер иконки */
.ico {
display: inline-block;
width: 24px; height: 24px;
background-color: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
flex: none;
}
/* Каждый data-ico задаёт форму через --svg. SVG нарисованы вручную,
stroke-width 2, currentColor обнуляем (заливка маской берёт background-color). */
.ico[data-ico="menu"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="coffee"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="orders"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="profile"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="heart"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="heart-o"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="plus"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="minus"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="trash"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="search"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="close"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="check"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="cart"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="trophy"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="logout"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="bell"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="chef"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="arrow-left"]{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="sparkle"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ico[data-ico="settings"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
/* Иконки навигации: сопоставление data-icon (из nav.php) → форма */
.bottom-nav__icon[data-icon="menu"] { -webkit-mask: var(--ico-menu) center/contain no-repeat; mask: var(--ico-menu) center/contain no-repeat; }
.bottom-nav__icon[data-icon="orders"] { -webkit-mask: var(--ico-orders) center/contain no-repeat; mask: var(--ico-orders) center/contain no-repeat; }
.bottom-nav__icon[data-icon="profile"] { -webkit-mask: var(--ico-profile) center/contain no-repeat; mask: var(--ico-profile) center/contain no-repeat; }
:root {
--ico-menu: url("data:image/svg+xml;utf8,");
--ico-orders: url("data:image/svg+xml;utf8,");
--ico-profile: url("data:image/svg+xml;utf8,");
}