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

// Setup.

	$selector: '.wp-block-navigation__submenu-container';

	:root {
		--theme--css--submenu-transform: none;
		--theme--css--submenu-inset-inline-start: 0;
		--theme--css--submenu-inset-inline-end: auto;
		--theme--css--submenu-padding: calc( #{ $ratio_maj } * var( --wp--custom--navigation--submenu--padding--container, #{ $ratio * $ratio + rem } ) );
		--theme--css--submenu-item-padding: var( --wp--custom--navigation--submenu--padding--item, #{ $ratio_min + rem } );
		--theme--css--submenu-offset: #{ $ratio_maj + rem };
		--theme--css--submenu-separator--width: var( --wp--custom--navigation--submenu--separator--width, 0 );
		--theme--css--submenu-separator--style: var( --wp--custom--navigation--submenu--separator--style, solid );
		--theme--css--submenu-separator--color: var( --wp--custom--navigation--submenu--separator--color, inherit );

		--theme--css--animation-showSubMenu--from--transform: var(--theme--css--submenu-transform) translateY( 1rem );
		--theme--css--animation-showSubMenu--to--transform: var(--theme--css--submenu-transform);
		--theme--css--animation-showSubSubMenu--from--transform: translateX( 1rem );

		@include media( map.get( $breakpoint, 'l' ) ) {
			--theme--css--submenu-transform: translateX( -50% );
			--theme--css--submenu-inset-inline-start: 50%;
		}

		@include media( map.get( $breakpoint, 'xl' ) ) {
			--theme--css--submenu-padding: var( --wp--custom--navigation--submenu--padding--container, #{ $ratio * $ratio + rem } );
		}
	}

	.wp-block-navigation.is-vertical {
		--theme--css--submenu-offset: 0;
		--theme--css--animation-showSubMenu--from--transform: translateX( 1rem );
		--theme--css--animation-showSubMenu--to--transform: none;
	}

	.rtl {
		--theme--css--animation-showSubMenu--from--transform: var(--theme--css--submenu-transform) translateY( 1rem );
		--theme--css--animation-showSubMenu--to--transform: var(--theme--css--submenu-transform);
		--theme--css--animation-showSubSubMenu--from--transform: translateX( -1rem );

		@include media( map.get( $breakpoint, 'l' ) ) {
			--theme--css--submenu-transform: translateX( 50% );
		}

		.wp-block-navigation.is-vertical {
			--theme--css--animation-showSubMenu--from--transform: translateX( -1rem );
		}
	}

	.no-centered-submenu {

		@include media( map.get( $breakpoint, 'l' ) ) {
			--theme--css--submenu-transform: none;
			--theme--css--submenu-inset-inline-start: calc( -1 * var(--theme--css--submenu-padding) );
			--theme--css--animation-showSubMenu--from--transform: translateY( 1rem );
			--theme--css--animation-showSubMenu--to--transform: none;
		}
	}

	@keyframes showSubMenu {
		from {
			opacity: 0;
			transform: var(--theme--css--animation-showSubMenu--from--transform);
		}
		to {
			opacity: 1;
			transform: var(--theme--css--animation-showSubMenu--to--transform);
		}
	}
	@keyframes showSubSubMenu {
		from {
			opacity: 0;
			transform: var(--theme--css--animation-showSubSubMenu--from--transform);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	:root {
		--theme--css--submenu-open-animation: showSubMenu .3s;
	}

	.wp-block-navigation.is-vertical,
	#{$selector} #{$selector} {
		--theme--css--submenu-open-animation: showSubSubMenu .3s;
		--theme--css--submenu-inset-inline-start: 100%;
	}

	.wp-block-navigation.items-justified-right {
		--theme--css--submenu-transform: none;
		--theme--css--submenu-inset-inline-start: auto;
		--theme--css--submenu-inset-inline-end: 0;
		--theme--css--animation-showSubMenu--from--transform: var(--theme--css--submenu-transform) translateY( 1rem );
		--theme--css--animation-showSubMenu--to--transform: var(--theme--css--submenu-transform);
		--theme--css--animation-showSubSubMenu--from--transform: translateX( -1rem );

		@include media( map.get( $breakpoint, 'l' ) ) {
			--theme--css--submenu-inset-inline-end: 50%;
			--theme--css--submenu-transform: translateX( 50% );
		}

		#{$selector} #{$selector} {
			--theme--css--submenu-inset-inline-start: auto;
			--theme--css--submenu-inset-inline-end: 100%;
		}

		.rtl & {
			--theme--css--animation-showSubMenu--from--transform: var(--theme--css--submenu-transform) translateY( -1rem );
			--theme--css--animation-showSubMenu--to--transform: var(--theme--css--submenu-transform);
			--theme--css--animation-showSubSubMenu--from--transform: translateX( 1rem );

			@include media( map.get( $breakpoint, 'l' ) ) {
				--theme--css--submenu-transform: translateX( -50% );
			}
		}
	}

		.no-centered-submenu.items-justified-right {

			@include media( map.get( $breakpoint, 'l' ) ) {
				--theme--css--submenu-transform: none;
				--theme--css--submenu-inset-inline-end: calc( -1 * var(--theme--css--submenu-padding) );
				--theme--css--animation-showSubMenu--from--transform: translateY( 1rem );
				--theme--css--animation-showSubMenu--to--transform: none;
			}

			.rtl & {

				@include media( map.get( $breakpoint, 'l' ) ) {
					--theme--css--submenu-transform: none;
				}
			}
		}

.wp-block-navigation .has-child:not(.open-always) {

	// Resetting WP styles:
	&.has-child.has-child #{$selector} {
		visibility: visible;
		width: auto;
		height: auto;
		min-width: clamp( 16em, 15vw, 320px );
		overflow: visible;
		opacity: 1;
	}

	// For mobile menu top level items.
	> .wp-block-navigation-item__content {
		flex-grow: 1;
	}

	// Over the hover helper (see below).
	&:hover > .wp-block-navigation-item__content {
		z-index: 5;
	}

	#{$selector} {
		text-transform: none;
		letter-spacing: normal;
		border-radius: var(--wp--custom--border-radius--sub-menu);

		&[class] {
			gap: 0;
			display: none;
			inset-inline-start: var(--theme--css--submenu-inset-inline-start) !important;
			inset-inline-end: var(--theme--css--submenu-inset-inline-end) !important;
			transform: var(--theme--css--submenu-transform);
			padding: calc( var(--theme--css--submenu-padding) - 2 * var(--theme--css--submenu-item-padding) ) var(--theme--css--submenu-padding);
			box-shadow: var(--wp--custom--shadow--sub-menu);

			// Sub-submenu.
			#{$selector} {
				font-size: 1em;
				inset-block-start: calc( -1 * ( var(--theme--css--submenu-padding) - 2 * var(--theme--css--submenu-item-padding) ) );
				transform: none;

				// Helper to improve moving mouse cursor over to the submenu
				// by adding more real estate for hover (so the submenu does
				// not close prematurely when cursor moves out of the parent).
				&::before {
					content: '';
					position: absolute;
					display: block; // This is required (see "something" above).
					width: $ratio * 2em;
					height: min( calc( 3em + var(--theme--css--submenu-padding) ), 100% );
					inset-inline-end: 100%;
					inset-block-start: var(--theme--css--submenu-padding);
					opacity: 0;

					.editor-styles-wrapper & {
						display: none;
					}
				}
			}

			.wp-block-navigation-item__content {
				// `.125em` compensates for label's `line-height: 1.25` so we make the line
				// height faux 1.5 (1.25 + 2 * .125).
				// (Yes, we make this line height 1.5 instead of 1.618. It's design decision.)
				padding: calc( var(--theme--css--submenu-item-padding) + .125em ) 0;
			}
		}
	}

	// Open submenu action.
	&.is-editing > #{$selector}, // For Site Editor.
	[aria-expanded="true"] ~ #{$selector},
	&:not(.open-on-click):hover > #{$selector},
	&:not(.open-on-click, .open-on-hover-click):focus-within > #{$selector},
	.no-js &:focus-within > #{$selector} {
		display: flex;
		animation: var(--theme--css--submenu-open-animation);
	}
}

html .wp-block-navigation .has-child.open-always #{$selector} {
	padding-inline: 0;
	margin-inline-start: 1em;
}

// Top level menu items: submenu offset.
// Works only with horizontal navigation.
.no-overlay-menu:not(.is-vertical),
.has-overlay-menu .wp-block-navigation__responsive-container:not(.is-menu-open) {

	.wp-block-navigation__container > .has-child:not(.open-always) {

		> #{$selector} {
			margin-block-start: var(--theme--css--submenu-offset);
		}

		// Open submenu action.
		&.is-editing, // For Site Editor.
		&:not(.open-on-click):hover,
		&:not(.open-on-click, .open-on-hover-click):focus-within,
		.no-js &:focus-within {

			&::before {
				content: '';
				position: absolute;
				inset-inline: 0;
				inset-block-start: 100%;
				height: var(--theme--css--submenu-offset);
			}
		}
	}
}

// For Site Editor.
.wp-block-navigation {

	.has-child:not(.open-always).has-child-selected,
	.has-child:not(.open-always).is-selected {

		> #{$selector} {
			min-width: clamp( 16em, 15vw, 320px ) !important;
		}
	}
}

.wp-block-navigation.is-vertical .has-child:not(.open-always) #{$selector} {
	inset-block-start: calc( -1 * ( var(--theme--css--submenu-padding) - 2 * var(--theme--css--submenu-item-padding) ) );
	transform: none;
}

[class].wp-block-navigation:not(.has-background) #{$selector} {
	// This can not be edited by `theme.json`.
	border-width: 0;
	border-color: inherit;
}

//
// Submenu item border separator.
//
#{$selector} > .wp-block-navigation-item:not( :last-child ) {

	:root :where( [id|="site-navigation"] & ) {
		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...
	}
}
