/*
 * BUTTON With Low emphasis
 */

button.btn-low-emphasis{
	text-align: center;
	display: inline-block;
	border: none;
	outline: none;
	cursor: pointer;
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 1.5em;
	min-height: 1.5em;
	line-height: 1.5em;

	overflow: visible;
	background: transparent;
	background-position: center; /* used for hover ripple effect */
	background-size: 0%;
	color: var(--colortextlink, inherit);
	font: inherit;
	line-height: normal;

	/* Corrects font smoothing for webkit */
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;

	/* Corrects inability to style clickable input types in iOS */
	-webkit-appearance: none;


	transition: background 0.8s;/* used for hover ripple effect */
	background: transparent radial-gradient(circle, transparent 1%, hsla(var(--colortextlink-h),var(--colortextlink-s) ,var(--colortextlink-l) , 0.1) 1%, transparent 10%) center/15000%;
}

button.btn-low-emphasis.--btn-icon{
	border-radius: 100%;
}

button.btn-low-emphasis :is(.fa, .fas){
	color: var(--colortextlink, inherit);
	opacity: 0.4;
}

button.btn-low-emphasis:is(:focus,:hover) :is(.fa, .fas){
	opacity: 0.8;
}

button.btn-low-emphasis.--btn-icon:active {
	background-color:  hsla(var(--colortextlink-h),var(--colortextlink-s) ,var(--colortextlink-l) , 0.1);
	background-size: 100%;
	transition: background 0s;/* used for hover ripple effect */
}