/* @layer base {  */

/* defaults */

[class*="icon:"]:before,
[class*="icon-after:"]:after { 
	display: inline-block;
    background-color: currentColor;
	width: 1em;
	height: 1em;
	content: "";
	/* --tw-content: ""; */
	mask-size: 1em;
    position: relative;
    top: .2em;
	right: 0;
	transition: .2s; 
}
[class*="icon:"]:before {
    margin-left: .6em;
    mask-image: var(--svg);
}
[class*="icon-after:"]:after {
    margin-right: .6em;
    mask-image: var(--svg-after);
}

/* flag & emoji */

[class*="icon:"][class*="emoji"]:before,
[class*="icon-after:"][class*="emoji"]:after {
    background-color: initial;
	background-size: 1em;
    mask-image: initial;
}
[class*="icon:"][class*="emoji"]:before {
    background-image: var(--svg);
}
[class*="icon-after:"][class*="emoji"]:after {
    background-image: var(--svg-after);
}

/* desc, label, info, ring, avatar */

[class*="icon:desc/"]:before,
[class*="icon:info/"]:before,
[class*="icon:label/"]:before,
[class*="icon:ring/"]:before,
[class*="icon:avatar/"]:before,
[class*="icon-after:desc/"]:after,
[class*="icon-after:info/"]:after,
[class*="icon-after:label/"]:after,
[class*="icon-after:ring/"]:after,
[class*="icon-after:avatar/"]:after {
    mask-image: initial;
	height: initial;
    top: initial;
    transform: scale(1);
	text-align: center;
	letter-spacing: normal;
	line-height: 1;
}

[class*="icon:desc/"]:before,
[class*="icon:info/"]:before,
[class*="icon:label/"]:before,
[class*="icon:ring/"]:before,
[class*="icon:avatar/"]:before {
    content: var(--icon-text);
}

[class*="icon-after:desc/"]:after,
[class*="icon-after:info/"]:after,
[class*="icon-after:label/"]:after,
[class*="icon-after:ring/"]:after,
[class*="icon-after:avatar/"]:after {
    content: var(--icon-text-after);
}

/* label */

[class*="icon:label/"]:before,
[class*="icon-after:label/"]:after {
	background-size: calc( 2.25em * 100 / 85 );
	background-color: var(--after-color);
	width: calc( 2.25em * 100 / 85 );
	/* height: 1em; */
    padding: .1em 0;
    font-size: .85em;
	font-weight: 600;
	/* font-family: sans-serif; */
	border-radius: .25em;
	-webkit-text-fill-color: var(--bg);
}

/* info */

[class*="icon:info/"]:before,
[class*="icon-after:info/"]:after {
	-webkit-text-fill-color: initial;
	color: white;
	background-color: var(--color-gray-400);
	background-size: calc( 2.25em * 100 / 85 );
	width: initial;
    padding: .1em .3em;
    font-size: .85em;
	font-weight: 600;
	/* font-family: sans-serif; */
	/* outline: 2px solid var(--color-gray-200); */
    /* outline-offset: -1px; */
	border-radius: .25em;
}

/* desc */

[class*="icon:desc/"]:before,
[class*="icon-after:desc/"]:after {
	-webkit-text-fill-color: initial;
	color: var(--color-gray-400);
	background-color: transparent;
	background-size: initial;
	width: initial;
    padding: .2em 0;
    font-size: .75em;
	font-weight: 400;
}

/* ring */
[class*="icon:ring/"]:before,
[class*="icon-after:ring/"]:after {
	background-size: calc( 2.25em * 100 / 85 );
	width: calc( 2.25em * 100 / 85 );
	height: calc( 2.25em * 100 / 85 );
    padding: 0;
    font-size: .85em;
	font-weight: 600;
	font-family: sans-serif;
    border-radius: 4em;
	-webkit-text-fill-color: var(--color-gray-400);
    background-image: radial-gradient(circle, white 60%, transparent 63%), conic-gradient(var(--after-color) var(--percent), var(--color-gray-300) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
	top: -0.4em !important;
}

/* avatar */
[class*="icon:avatar/"]:before,
[class*="icon-after:avatar/"]:after {
	background-size: calc( 2.25em * 100 / 85 );
	width: calc( 2.25em * 100 / 85 );
	height: calc( 2.25em * 100 / 85 );
    padding: 0;
    font-size: .85em;
	font-weight: 600;
	font-family: sans-serif;
    border-radius: 4em;
	-webkit-text-fill-color: transparent;
    background-color: var(--color-gray-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* cta */

a:hover > [class*="icon-after:"][class*="arrow-left"]:after,
a:hover > [class*="icon-after:"][class*="chevron-left"]:after,
a[class*="icon-after:"][class*="arrow-left"]:hover:after,
a[class*="icon-after:"][class*="chevron-left"]:hover:after {
	right: .5em;
}

/* i */

i[class*="icon:"] {
	line-height: 0; 
}
i[class*="icon:"]:before {
	top: 0;
	margin-left: 0;
}




/*  */

.neon[class*="icon-after:"]:after,
.neon[class*="icon-text-after:"]:after {
	color: var(--a-neon-color);
}

/* info */
.icon-info > [class*="icon-text:"]:before,
.icon-info[class*="icon-text:"]:before,
.icon-info > [class*="icon-text-after:"]:after,
.icon-info[class*="icon-text-after:"]:after {
	-webkit-text-fill-color: var(--color-gray-400);
	background-color: transparent;
	
}




/* } */