.icon { --s: 50px; --z: 1; --p: 0 0; width: var(--s); height: var(--s); display: inline-block; flex-shrink: 0; vertical-align: middle; margin: 0 8px 0 0; position: relative; overflow: hidden; } .icon::after { content: ""; display: block; width: 50px; height: 50px; background: currentColor; mask: url("../../imgs/icons.webp") no-repeat var(--p) / 480%; -webkit-mask: url("../../imgs/icons.webp") no-repeat var(--p); -webkit-mask-size: 480%; position: absolute; left: 0; top: 0; transform: scale(var(--z)); transform-origin: left top; } .icon.s10 { --s: 10px; --z: 0.2; } .icon.s12 { --s: 12px; --z: 0.23; } .icon.s13 { --s: 13px; --z: 0.25; } .icon.s15 { --s: 15px; --z: 0.3; } .icon.s20 { --s: 20px; --z: 0.4; } .icon.s25 { --s: 25px; --z: 0.5; } .icon.s30 { --s: 30px; --z: 0.6; } .icon.s35 { --s: 35px; --z: 0.7; } .icon.s40 { --s: 40px; --z: 0.8; } .icon.s45 { --s: 45px; --z: 0.9; } .i-menu { --p: 0 -60px; } .i-search { --p: 0 -120px; } .i-share { --p: 0 -180px; } .i-external { --p: 0 -240px; } .i-backArrow { --p: 0 -300px; } .i-idea { --p: 0 -360px; } .i-mail { --p: 0 -420px; } .i-plusCircle { --p: 0 -480px; } .i-document { --p: 0 -540px; } .i-lock { --p: 0 -600px; } .i-bulgaria { --p: 0 -660px; } .i-flame { --p: 0 -720px; } .i-comment { --p: 0 -780px; } .i-map { --p: 0 -840px; } .i-pin { --p: 0 -900px; } .i-location { --p: 0 -960px; } .i-check { --p: 0 -1020px; } .i-phone { --p: 0 -1080px; } .i-clock { --p: 0 -1140px; } .i-warning { --p: 0 -1200px; } .i-warningCircle { --p: 0 -1260px; } .i-question { --p: 0 -1320px; } .i-checkCircle { --p: 0 -1380px; } .i-info { --p: 0 -1440px; } .i-dropdown { --p: 0 -1500px; } .i-home { --p: 0 -1560px; } .i-user { --p: 0 -1620px; } .i-discount { --p: 0 -1680px; } .i-copy { --p: 0 -1740px; } .i-login { --p: 0 -1800px; } .i-logout { --p: 0 -1860px; } .i-infinity { --p: 0 -1920px; } .i-close { --p: 0 -1980px; } .i-star { --p: 0 -2040px; } .i-heart { --p: 0 -2100px; } .i-basket { --p: 0 -2160px; } .i-download { --p: 0 -2220px; } .i-settings { --p: 0 -2280px; } .i-card { --p: 0 -2340px; } .i-more { --p: 0 -2400px; } .i-calendar { --p: 0 -2460px; } .i-booth { --p: 0 -2520px; } .i-farmer { --p: 0 -2580px; } .i-money { --p: 0 -2640px; } .i-stats { --p: 0 -2700px; } .i-edit { --p: 0 -2760px; } .i-cart { --p: 0 -2820px; } .i-feed { --p: 0 -2880px; } .i-planet { --p: 0 -2940px; } .i-vegetables { --p: 0 -3000px; } .i-meat { --p: -60px 0; } .i-fish { --p: -60px -60px; } .i-cheese { --p: -60px -120px; } .i-egg { --p: -60px -180px; } .i-fruit { --p: -60px -240px; } .i-bakery { --p: -60px -300px; } .i-cake { --p: -60px -360px; } .i-jar { --p: -60px -420px; } .i-bottle { --p: -60px -480px; } .i-pet { --p: -60px -540px; } .i-dress { --p: -60px -600px; } .i-purse { --p: -60px -660px; } .i-umbrella { --p: -60px -720px; } .i-pillow { --p: -60px -780px; } .i-cosmetics { --p: -60px -840px; } .i-bicycle { --p: -60px -900px; } .i-tech { --p: -60px -960px; } .i-tools { --p: -60px -1020px; } .i-bricks { --p: -60px -1080px; } .i-machine { --p: -60px -1140px; } .i-others { --p: -60px -1200px; } .i-honey { --p: -60px -1260px; } .i-flower { --p: -60px -1320px; } .i-cookie { --p: -60px -1380px; } .i-herb { --p: -60px -1440px; } .i-acorn { --p: -60px -1500px; } .i-shoe { --p: -60px -1560px; } .i-underwear { --p: -60px -1620px; } .i-wallet { --p: -60px -1680px; } .i-backpack { --p: -60px -1740px; } .i-teddyBear { --p: -60px -1800px; } .i-diamond { --p: -60px -1860px; } .i-shirt { --p: -60px -1920px; } .i-carrot { --p: -60px -1980px; } .i-craft { --p: -60px -2040px; } .i-parking { --p: -120px 0; } .i-creditCard { --p: -120px -60px; } .i-delivery { --p: -120px -120px; } .i-airCond { --p: -120px -180px; } .i-wheelchair { --p: -120px -240px; } .i-restroom { --p: -120px -300px; } .i-cutlery { --p: -120px -360px; } .i-facebook { --p: -180px 0; } .i-instagram { --p: -180px -60px; } .i-twitter { --p: -180px -120px; } .i-linkedin { --p: -180px -180px; } .i-tiktok { --p: -180px -240px; } .i-whatsapp { --p: -180px -300px; } .i-viber { --p: -180px -360px; } .button.externalLoginService .icon { --p: 0 0; } .button.externalLoginService .icon::after { mask: none; -webkit-mask: none; background: url("../../imgs/icons_externalLoginServices.webp") no-repeat var(--p) / 240%; } .button.externalLoginService .icon.i-google { --p: 0 0; } .button.externalLoginService .icon.i-facebook { --p: 0 -60px; } .button.externalLoginService .icon.i-apple { --p: 0 -120px; } @media (prefers-color-scheme: dark) { .button.externalLoginService .icon.i-google { --p: -60px 0; } .button.externalLoginService .icon.i-facebook { --p: -60px -60px; } .button.externalLoginService .icon.i-apple { --p: -60px -120px; } }