body {
	&.flyout-menu-open,
	&.flyout-search-open {
		overflow-y: hidden;
	}
}

.flyout-search__background,
.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-search-closer.close-icon,
.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-search-closer.close-icon,
.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;
	}
}