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

.drop-down {
	--transition-duration: 0.5s;
	--transition-easing: cubic-bezier( 0.16, 1, 0.3, 1 );

	--drop-down-background: var( --nav-background, var( --glass-background ) );
	--drop-down-border-radius: var( --nav-border-radius, var( --border-radius ) );
	--font-color: var( --nav-color, var( --glass-color ) );

	--drop-down-indicator-width: 0px;

	height: var( --active-height );
	overflow: visible;
	position: relative;
	color: var( --font-color );
}

.drop-down.is-active {
	--drop-down-border-radius: var( --box-border-radius--floating );
}



.drop-down-inner {
	display: flex;
	height: auto;
	width: calc( var( --active-width ) + var( --drop-down-indicator-width ) + 1px );

	border-radius: var( --border-radius );
	overflow: hidden;

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

.is-ready .drop-down-inner {
	transition: width var( --transition-duration ) var( --transition-easing );
}

.drop-down.is-active .drop-down-inner {
	width: calc( var( --max-width, auto ) + var( --drop-down-indicator-width ) + 1px );
}



.drop-down__indicator {
	position: absolute;
	top: -0.05em;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	padding-top: 0.125em; 
	padding-right: 0.775em;

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

.drop-down.is-active .drop-down__indicator {
	top: -0.15em;
}

	.drop-down.is-active .drop-down__indicator > i::before {
		content: '\F090';
	}



.drop-down__options {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}



.drop-down-option {
	padding-right: var( --drop-down-indicator-width );
	z-index: 10;
}

.is-loaded .drop-down.is-active .drop-down-option {
	transition: margin-top  var( --transition-duration ) var( --transition-easing );
}

.drop-down-option.is-active {
	z-index: 20;
}

.drop-down-option:not( :first-child ) {
	margin-top: var( --nav-sp );
}

.drop-down:not( .is-active ) .drop-down-option:not( .is-active ) {
	margin-top: calc( var( --active-height ) * -1 );
}

.drop-down:not( .is-active ) .drop-down-option.is-active {
	margin-top: 0;
}

	.drop-down-option .button {
		display: block;
	}

	.drop-down-option .button__label {
		padding-right: calc( var( --button-horizontal-padding ) + 1.25em );
	}