/**
 * @author alisch berlec hönow <info@abh.eu>
 * @version 4.6.6
 *
 * Mdj Component: Button
 */

.button-group {
	--button-spacing: 0.4em;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 calc( var( --button-spacing ) * -0.5 ) calc( var( --button-spacing ) * -1 );
}

.button-group > .button {
	margin: 0 calc( var( --button-spacing ) * 0.5 ) var( --button-spacing );
}



body {
	--button-size: 2.1em;
}

.button {
	--button-border-radius: var( --nav-border-radius, var( --border-radius ) );
	--button-background: transparent; /*var( --nav-background, var( --glass-background ) )*/;
	/*--font-color: var( --nav-color, var( --glass-color ) ); */ 
	/*--button-vertical-padding: 1em;
	--button-horizontal-padding: 2em; */
	/*--button-vertical-padding: calc( var( --box-vertical-padding ) * 0.8 );
	--button-horizontal-padding: calc( var( --box-horizontal-padding ) * 1 ); */ 
	--button-vertical-padding: 0.55em;
	--button-horizontal-padding: 0.85em;

	--button-indicator-size: 1.5em;
	--button-state-background: transparent;
	--button-state-color: var( --white ); 

	position: relative;
	display: inline-flex;
	color: var( --font-color );

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.button[data-action]:not( [data-action=""] ) {
	cursor: pointer;
}

.button[data-state="live"] {
	--button-background: var( --live-color );
	--font-color: var( --black );
}

	.button[data-state="live"] .button__background {
		border-color: var( --live-color );
	}

.button[data-state="success"] {
	--button-state-background: var( --green );
}

.button[data-state="failure"] {
	--button-state-background: rgb( 248, 81, 99 );
}

.button[data-state="idle"],
.button[data-state="loading"] {

}

	.button > a {
		display: flex;
		position: relative;
		z-index: 20;
	}



.button__label {
	--line-height: 1;
	line-height: var( --line-height );

	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 20;

	height: var( --button-size );
	padding: 0 var( --button-horizontal-padding ); 
	white-space: nowrap;
	padding-top: 1px;
}

.button[data-state]:not( [data-state=""] ):not( [data-state="live"] ):not( [data-state="default"] ) .button__label {
	padding-right: 0;
}

.button.display--icon .button__label {
	padding: 0;
	width: var( --button-size );
}

.is-loaded .button__label {
	transition: padding var( --transition-duration ) var( --transition-easing );
}

	.button__label .bt-play:not( .bts ) {
		margin-left: 0.15em;
	}

	.button__label > span[class^="icon"] + span:not( [class^="icon"] ),
	.button__label > span + i {
		margin-left: 0.5em; 
	}

	.button__label > span:not( [class^="icon"] ) + span[class^="icon"],
	.button__label > i + span {
		margin-right: 0.5em; 
	}

	.button__label > span > i {
		display: block;
		top: 0.05em;
	}



.button__state {
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;

	height: var( --button-indicator-size );
	width: var( --button-indicator-size );
	border-radius: calc( var( --button-indicator-size ) * 2 );

	margin-left: 0.45em;
	margin-right: calc( ( 1em + var( --button-vertical-padding ) * 2 - var( --button-indicator-size ) ) * 0.45 );
	background: var( --button-state-background );

	z-index: 20;
	pointer-events: none;
}

.button[data-state=""] .button__state,
.button[data-state="live"] .button__state,
.button[data-state="default"] .button__state {
	width: 0;
	margin-left: 0;
	margin-right: 0;
}

.is-loaded .button__state {
	transition: width 0.2s var( --transition-easing ),
				margin 0.2s var( --transition-easing ),
				background 0.2s var( --transition-easing )
				;
}
	
	.button__state > i {
		color: var( --button-state-color );
		font-size: 0.65em;
		top: 0.05em;
	}

	.button[data-state="success"] .button__state > i::before {
		content: '\F012';
	}

	.button[data-state="failure"] .button__state > i::before {
		content: '\F00C';
	}

	.button[data-state="idle"] .button__state > i,
	.button[data-state="loading"] .button__state > i {
		-webkit-animation: bt-spin 2s infinite linear;
		animation: bt-spin 2s infinite linear;
	}

	.button[data-state="idle"] .button__state > i::before,
	.button[data-state="loading"] .button__state > i::before {
		content: '\F043';
	}



.button__background {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: var( --button-background ); 
	border-radius: var( --button-border-radius );
	border: var( --border-width ) solid currentColor;

	-webkit-backdrop-filter: var( --glass-filter );
	-moz-backdrop-filter: var( --glass-filter );
	backdrop-filter: var( --glass-filter );
	box-shadow: var( --glass-shadow );
}



.button__annotation {
	position: absolute;
	right: -0.2em; 
	top: -0.2em; 
	padding: 0.25em 0.45em;
	background: var( --highlight-color );
	border-radius: 0.75em;
	z-index: 20;
	font-size: 0.7em;
	line-height: 1;
}