//
// Mobile menu.
//
// @version  1.1.7

// Setup.

	@keyframes showSubMenuMobile {
		from {
			opacity: 0;
			transform: translateY( -1rem );
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

.wp-block-navigation__responsive-container {

	.wp-block-navigation-item__description {
		font-size: $ratio_maj + em;
	}

	&:not(.is-menu-open.is-menu-open) {
		border-color: inherit;
	}

	// Menu toggle button(s).
	&-open,
	&-close {

		&,
		.editor-styles-wrapper[class] & {
			padding: $ratio_maj + em;
			background: var(--theme--css--button--color--background);
			color: var(--theme--css--button--color--text);
			border: 2px solid var(--theme--css--button--color--border);
			border-radius: var(--wp--custom--button--border-radius);
			box-shadow: var(--wp--preset--shadow--s);
			transition:
				transform .1s linear,
				background .1s linear,
				color .1s linear,
				border .1s linear,
				box-shadow .1s linear;

			&:hover,
			&:focus {
				box-shadow: var(--wp--preset--shadow--m);
				transform: scale(1.05);
			}

			&:focus {
				--wp--custom--outline--color: var(--theme--css--button--color--outline);
				outline-color: var(--theme--css--button--color--outline);
			}

			&:active {
				box-shadow: none;
			}
		}
	}

		&-close {
			margin-block: 1rem;
		}
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	--theme--css--submenu-item-padding: #{ $ratio_maj + rem };
	--theme--css--submenu-gap: 0;
	--theme--css--menu-gap: #{ $ratio_maj + rem };

	width: 100vw; // This is required.
	height: 100vh; // This is required.
	padding-inline: 6vw;
	font-size: 1rem;

	.wp-block-navigation-item {
		padding: 0;
		white-space: normal;

		&__content {
			flex-grow: 1;
		}
	}

	.wp-block-navigation__submenu-container {
		--theme--css--submenu-open-animation: showSubMenuMobile .3s;
	}

	// Outer dialog container.
	.wp-block-navigation__responsive-dialog {
		max-width: map_get( $breakpoint, 's' ) + px;
		margin-inline: auto;
		margin-block-start: calc( 1em + var( --wp-admin--admin-bar--height, 0 ) );
	}

	// Menu list wrapper <div>.
	.wp-block-navigation__responsive-container-content {
		padding-top: var(--wp--custom--spacing--menu-mobile--top--m);
		padding-bottom: var(--wp--custom--spacing--menu-mobile--bottom--m);
	}

	// Menu list <ul>.
	.wp-block-navigation__container {
		gap: var(--theme--css--menu-gap);
		width: 100%;
		max-width: 100%;

		// Top level menu items.
		> .wp-block-navigation-item > .wp-block-navigation-item__content {
			padding-block: 0;
			font-size: var(--theme--css--font-size-h3);
		}

		// Submenu list <ul>.
		.wp-block-navigation__submenu-container[class] {
			gap: var(--theme--css--submenu-gap);
			width: 100%;
			inset: 0;
			padding: 0 1em;
			padding-inline-end: 0;
			margin-block-start: .5em;
			font-size: 1rem;
			border-color: inherit;
			box-shadow: none;
			transform: none;
		}
	}

	// Submenu list <ul> hiding.
	[aria-expanded="false"] + .wp-block-navigation__submenu-container {
		display: none;
	}

	// Navigation item <li>.
	.wp-block-navigation-item {
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		min-height: var(--theme--css--submenu-toggle-size);
	}
}

.wp-block-navigation.is-style-fixed-mobile-toggle:not(.block-editor-block-list__block) {

	@include media( ( map_get( $breakpoint, 'l' ), 'max-width' ) ) {

		.is-layout-flex &:first-child + :last-child {
			width: 100%;
		}

		.wp-block-navigation__responsive-container {

			&.is-menu-open {
				animation: none; // Required to make `position: fixed;` on children (such as close button) work.
			}

			&-open,
			&-close {
				position: fixed;
				left: 50%;
				right: auto;
				top: auto;
				bottom: 1em;
				padding: 1em;
				margin: 0;
				font-size: 1rem;
				background: var(--theme--css--button--color--background);
				color: var(--theme--css--button--color--text);
				border-color: currentColor;
				z-index: 10;
				transform: translateX(-50%);

				.rtl & {
					left: auto;
					right: 50%;
					transform: translateX(50%);
				}

				&:focus {
					outline-color: var(--theme--css--button--color--outline);
				}
			}
		}

		// Menu list wrapper <div>.
		.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
			padding-block-start: var(--wp--custom--spacing--menu-mobile--top--l);
		}
	}
}

// Responsive block styles.
.is-style-mobile {

	.has-overlay-menu & {

		&-only,
		&-hide {
			display: revert !important;
		}
	}

	&-only {

		.wp-block-navigation__responsive-container:not(.is-menu-open) & {
			display: none !important;
		}
	}

	&-hide {

		.wp-block-navigation__responsive-container.is-menu-open & {
			display: none !important;
		}
	}
}

// Blurred background.

	.wp-block-navigation__responsive-overlay {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		animation: none !important; // Required to make `position: fixed;` on children (such as close button) work.
		background: none !important;

		// Backdrop filter (and fixed position) does not work on elements with:
		// - opacity set
		// - animation set
		// - transform set.
		//
		// We need to use wrapper element for backdrop blur
		// and set the background colors and opacity on inner element.
		.wp-block-navigation__responsive-overlay {
			backdrop-filter: blur( var(--wp--custom--filter--blur--backdrop) );

			&,
			div {
				display: block;
				position: fixed;
				inset: 0;
			}

			div {
				opacity: var(--wp--custom--opacity--navigation-overlay);
			}
		}
	}

//
// Temporary a11y fix to prevent broken focus trap on mobile menu submenus.
//
// @todo  Remove this once WordPress fixes Navigation block JS.
// @link  https://github.com/WordPress/gutenberg/issues/63033
//

	@mixin a11y_fix() {

		.wp-block-navigation__submenu-container {
			--theme--css--submenu-open-animation: none;
		}

		.wp-block-navigation__container .wp-block-navigation__submenu-container[class] {
			display: flex;
		}

		.has-child:not(.open-on-click) .wp-block-navigation-submenu__toggle {
			display: none;
		}

		.has-child .has-child > .wp-block-navigation-item__content {
			border-bottom-width: 1px;
			border-bottom-style: dotted;
		}
	}

	// Apply when `navigation-a11y-fix` class applied on body tag.
	.navigation-a11y-fix .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
		@include a11y_fix();
	}

	// Apply automatically for accessibility media queries.
	@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
		@include a11y_fix();
	}

@import '../_extend/_index';
