.flyout-menu-closer.close-icon,
.flyout-menu .menu-back,
.flyout-menu summary {
	&::before {
		content: "";
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-origin: content-box;
		mask-origin: content-box;
		position: absolute;
		background-color: currentColor;
		top: 0;
		height: 100%;
	}
}

.flyout-menu-closer.close-icon {
	position: relative;
	min-height: 3rem;
	width: 3rem;
	margin-left: auto;

	&:before {
		-webkit-mask-image: url( /wp-content/themes/emma/assets/icons/no-alt.svg );
		mask-image: url( /wp-content/themes/emma/assets/icons/no-alt.svg );
		left: 0;
		width: 100%;
		padding: 0.5rem 0;
	}
}

body {
	&.flyout-menu-open {
		overflow-y: hidden;
	}
}

.flyout-menu__background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	background: rgba( 0, 0, 0, 0.25 );;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	backdrop-filter: blur( 3px );

	.flyout-menu-open & {
		visibility: visible;
		opacity: 1;
	}
}

.flyout-menu {
	position: fixed;
	top: var( --admin-bar-height );
	bottom: 0;
	right: 0;
	width: 100%;
	max-width: 400px;
	margin: 0;
	background-color: white;
	z-index: 10;
	visibility: hidden;
	transition: visibility 0.2s,transform 0.2s ease;

	.flyout-menu-open & {
		transform: translateX( 0 ) !important;
		visibility: visible;
		transition: transform 0.2s ease;
	}

	.has-open-submenu {
		visibility: hidden !important;
	}

	& ul {
		list-style: none;
		padding-left: 0;
		margin: 0;
	}

	& a,
	& button,
	& summary {
		display: block;
		padding: 0.5rem 1rem;
		color: black;
		text-decoration: none;
		outline-offset: -3px;
	}

	& button {
		border: 0;
		background-color: white;
		width: 100%;
		text-align: left;
	}

	.menu-back {
		position: relative;
		padding-left: 2.5rem;
		font-size: 0.8em;

		&:before {
			-webkit-mask-image: url( /wp-content/themes/emma/assets/icons/arrow-left-alt.svg );
			mask-image: url( /wp-content/themes/emma/assets/icons/arrow-left-alt.svg );
			left: 1rem;
			width: 1rem;
		}
	}

	& summary {
		position: relative;
		padding-right: 3rem;
		cursor: pointer;

		&::marker {
			content: '';
			display: none;
		}
		&:before {
			-webkit-mask-image: url( /wp-content/themes/emma/assets/icons/arrow-left-alt.svg );
			mask-image: url( /wp-content/themes/emma/assets/icons/arrow-left-alt.svg );
			right: 1rem;
			width: 1.5rem;
			transform: rotate( 180deg );
		}
	}

	.flyout-menu__inner-container {
		display: flex;
		flex-direction: column;
		height: calc( 100% - 3rem );
	}

	.submenu {
		position: absolute;
		top: -1px;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateX( 100% );
		visibility: hidden;
		background-color: white;
		z-index: 2;
	}

	.flyout-menu__menus {
		position: relative;
		height: 100%;
		flex-grow: 1;
	}

	.top-menu__inner-container {
		transition: visibility 0.2s ease;
	}

	.top-menu__inner-container,
	.submenu__inner-container {
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	& details[open] {
		> .submenu {
			transition: transform 0.2s ease, visibility 0.2s ease;
		}

		&.submenu-open > .submenu {
			transform: translateX( 0 ) !important;
			visibility: visible;
		}
	}

	.secondary-menu > li > a,
	.secondary-menu > li > details > summary {
		font-size: var( --wp--preset--font-size--small );
		padding: 0.25rem 1rem;
	}
}
