//
// Mobile menu.
//
// @since    1.0.0
// @version  2.0.4
//
@use 'sass:map';

// Setup.

	.disable-default-overlay {
		--theme--css--submenu-separator--width: 0;
	}

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

.wp-block-navigation__responsive-container {

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

	// Menu toggle button(s).
	&-open,
	&-close,
	.wp-block-navigation-overlay-close {

		html :where(&)[class] {
			--theme--css--button--color--border: currentColor;
			padding: .66em;
		}

		// This theme does not style mobile toggle button as outline.
			// Simplified @extend %button_outline.
			// html .a11y-disable-fixed-mobile-toggle :where(&)[class] {
			// 	background: transparent;
			// 	color: currentColor;
			// 	outline-style: var( --wp--custom--outline--style, auto );
			// 	outline-color: currentColor;
			// }
			// html .is-style-fixed-mobile-toggle :where(&)[class] {
			// 	@include media( map.get( $breakpoint, 'l' ) ) {
			// 		background: transparent;
			// 		color: currentColor;
			// 		outline-style: var( --wp--custom--outline--style, auto );
			// 		outline-color: currentColor;
			// 	}
			// }

		// Overriding editor styles to roughly match button styles.
		.editor-styles-wrapper &[class] {
			aspect-ratio: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: $ratio * $ratio * 1em;
			padding: 0;
			text-align: center;
			color: var(--theme--css--button--color--text);
		}
	}

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

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	--theme--css--submenu-item-padding: #{ $ratio_maj + rem };
	--theme--css--submenu-gap: 0;
	--theme--css--menu-gap: var( --wp--custom--navigation--mobile--menu-gap, #{ $ratio_maj + rem } );

	width: 100vw; // This is required.
	height: 100svh; // This is required.
	padding-inline: 6vw;
	font-size: 1rem;
	border-radius: 0;

	.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(--wp--custom--font-size--navigation--mobile--top-level);
		}

		// 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);
	}
}

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

	@include media( ( map.get( $breakpoint, 'l' ), 'max-width' ) ) {

		.wp-block-navigation__responsive-container {

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

			//
			// IMPORTANT:
			// Fixed positioning does not work if any of these styles
			// are applied on the button container:
			// - animation
			// - backdrop-filter
			// - filter
			// - transform
			//
			&-open,
			&-close,
			.wp-block-navigation-overlay-close {
				position: fixed;
				left: 50%;
				right: auto;
				top: auto;
				bottom: 1em;
				margin: 0;
				font-size: 1rem;
				z-index: 10;
				transform: translateX(-50%);
			}
		}

		// Menu list wrapper <div>.
		.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .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-blurred.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);
				border-radius: 0;
			}
		}
	}

	.wp-block-navigation .disable-default-overlay.is-menu-open {

		&:has( .wp-block-navigation__overlay-container > .is-style-backdrop-blur ) {
			backdrop-filter: blur( var(--wp--custom--filter--blur--backdrop) );
		}

		.wp-block-navigation__overlay-container > .is-style-backdrop-blur::before {
			display: none;
		}
	}

//
// 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;
			box-shadow: none;
		}

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

		// @see  _navigation-submenu.scss
		:where( .has-child:not(.open-always) .has-child > .wp-block-navigation-item__content ) {
			border-bottom-width: var(--theme--css--submenu-separator--width);
			border-bottom-style: var(--theme--css--submenu-separator--style);
			border-bottom-color: var( --theme--css--submenu-separator--color, inherit ); // Fallback is required here, otherwise inherited border color does not work for some reason...
		}
	}

	// Apply when `a11y-fix-navigation` class applied on body tag.
	.a11y-fix-navigation .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open,
	// Apply also on menu in custom overlay regardless the `a11y-fix-navigation` class.
	// .wp-block-navigation .wp-block-navigation__responsive-container.disable-default-overlay.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';
