/*! d1-web icons v0.0.0 */

.js-icons [class*="icon-"]:before{content:none;}
[class*="icon-"]:before{content:"";margin-right:.5em;margin-right:var(--gap-s,.5em);display:inline-block;width:1em;height:1em;overflow:hidden;transform:translate(0,.15em) scale(1.2);background-position:50% 50%;background-size:contain;background-repeat:no-repeat;}
[class*="icon-"]:empty:before{margin:0;}
/* option 1 (requires .gal[class]>*{hide}) in index.css */
/* .empty{display:inline-block;width:1.1em;overflow:hidden;box-sizing:content-box;vertical-align:middle;height:1.5em;}*/ /*basic line-height*/
/* button.empty,.btn.empty{transform:translate(0,-.1em);height:1.3em;}*/ /*line-height:normal;*/
/* [class*="icon-"].empty:before{margin:0 2em 2em 0;} */
/* option 2 */
[class*="icon-"].empty>*{display:none;}
[class*="icon-"].empty:before{margin:0;}
@media (max-width: 899px){ /* mobile */
	[class*="icon-"].empty-mobile:before{margin:0;}
}
@media (min-width: 900px){ /* desktop */
	[class*="icon-"].empty-desktop:before{margin:0;}
}

[class*="icon-"]:before{filter:grayscale(1) brightness(8);}
.btn[class*="icon-"]:before, button[class*="icon-"]:before,
.btn [class*="icon-"]:before, button [class*="icon-"]:before{filter:brightness(0) invert(1);}

[class*="icon-"].text-e:before{filter:hue-rotate(120deg) brightness(.9);}
[class*="icon-"].text-w:before{filter:hue-rotate(175deg) brightness(3.8);}
[class*="icon-"].text-y:before{filter:hue-rotate(240deg) brightness(1.5);}
[class*="icon-"].text-i:before{filter:hue-rotate(300deg) saturate(.5) brightness(2);}
[class*="icon-"].text-n:before{}

/* default icon (blue circle) */
[class*="icon-"]:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%2300f' d='M5 2a3 3 0 1 0 .01 0z'/%3E%3C/svg%3E");
}

/* for icons with black fill */
/* add contrast(10) if originals not entirely black */
/*
[class*="icon-"].text-e:before{filter:invert(1) sepia(1) saturate(100) hue-rotate(300deg) saturate(100) brightness(.7);}
[class*="icon-"].text-w:before{filter:invert(1) sepia(1) saturate(100) hue-rotate(320deg) saturate(80) brightness(.9);}
[class*="icon-"].text-y:before{filter:invert(1) sepia(1) saturate(60) hue-rotate(60deg) saturate(100) brightness(.55);}
[class*="icon-"].text-i:before{filter:invert(1) sepia(1) saturate(100) hue-rotate(178.3deg) saturate(30) brightness(.65);}
[class*="icon-"].text-n:before{filter:invert(1) sepia(1) grayscale(1) brightness(.6);}
*/