/**
 * core/navigation - Mobile
 */

.wp-block-navigation.bam-nav-mobile {
	--nav--sub--icon-size: 1.25rem;

	.wp-block-navigation__submenu-icon {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: var(--wp--preset--spacing--15);
		block-size: var(--nav--sub--icon-size);
		inline-size: var(--nav--sub--icon-size);
		translate: 0 -50%;

		svg {
			stroke: none;
			fill: var(--wp--preset--color--primary);
		}
	}

	.wp-block-navigation-item__content {
		inline-size: 100%;
		padding: calc(var(--wp--preset--spacing--20) - 1px);
		background-color: var(--wp--preset--color--gray-lightest);
		border-radius: var(--wp--preset--border-radius--small);
		font-weight: 500;
		line-height: 1;
	}

	> .wp-block-navigation-item {
		position: relative;
		line-height: 0;

		&.has-child {
			> .wp-block-navigation-item__content {
				padding-inline-end: calc(var(--wp--preset--spacing--30) + var(--nav--sub--icon-size));

				/* Move the submenu icon to the left */
				+ .wp-block-navigation__submenu-icon {
					margin-inline-start: calc((var(--nav--sub--icon-size) + var(--wp--preset--spacing--20)) * -1);
					z-index: 1;
				}
			}
		}
	}

	/* Submenu container */
	.wp-block-navigation__container,
	.wp-block-navigation__submenu-container {
		align-items: stretch;
		gap: var(--wp--preset--spacing--10);
	}

	.wp-block-navigation__submenu-container {
		position: relative;
		inset: auto;
		block-size: auto;
		inline-size: 100%;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
	}

	.wp-block-navigation__submenu-wrapper {
		position: fixed;
		inset-block-start: var(--wp-admin--admin-bar--height);
		inset-inline: 0 100%;
		block-size: calc(100dvh - var(--wp-admin--admin-bar--height)) !important;
		inline-size: 100dvw !important;
		padding: 0 var(--wp--style--root--padding-left) var(--wp--preset--spacing--30);
		translate: 100% 0;
		background-color: var(--wp--preset--color--base);
		opacity: 1;
		transition: translate 0.3s ease-in-out;
		z-index: 100;

		/* Submenu links */
		.wp-block-navigation-item > .wp-block-navigation-item__content {
			padding: calc(var(--wp--preset--spacing--20) - 1px);
			font-weight: 700;
		}

		> * {
			z-index: 1;
		}
	}

	.wp-block-navigation-item:has(>[aria-expanded='true']) > .wp-block-navigation__submenu-wrapper {
		translate: 0 0 !important;
		overflow: auto;
	}

	.wp-block-navigation__submenu-back {
		position: sticky;
		inset-block-start: 0;
		margin-block-end: var(--wp--preset--spacing--20);
		padding-block: var(--wp--preset--spacing--10);
		background-color: var(--wp--preset--color--base);
		border-block-end: 1px solid var(--wp--preset--color--gray-lighter);
		z-index: 2;


		.wp-block-button.eh-has-icon.has-icon-start {
			.wp-element-button {
				justify-content: flex-end;
			}
		}
	}

	&:is(.bam-nav-util) {
		.wp-block-navigation-item__content {
			padding-block: calc(var(--wp--preset--spacing--15) - 1px);
		}
	}
}