/**
 * core/navigation
 */

.wp-block-navigation:where(.bam-nav-main,.bam-nav-util) {
	--nav--sub--offset: 54px;
	--nav--sub--inline-size: 300px;

	/* Set top-level submenu icon color */
	> .wp-block-navigation-submenu {
		.wp-block-navigation__submenu-icon {
			color: var(--wp--preset--color--primary);
		}
	}

	/* Submenu container */
	.wp-block-navigation__submenu-container {
		gap: var(--wp--preset--spacing--10);
		padding: var(--wp--preset--spacing--20);
		border: 0;
		border-radius: var(--wp--preset--border-radius--medium);
		box-shadow: 0 4px 24px 0 rgb(0 0 0 / 25%);

		> .wp-block-navigation-item {
			&:first-child {
				border-start-start-radius: var(--wp--preset--border-radius--medium);
				border-start-end-radius: var(--wp--preset--border-radius--medium);
			}

			&:last-child {
				border-end-start-radius: var(--wp--preset--border-radius--medium);
				border-end-end-radius: var(--wp--preset--border-radius--medium);
			}


			> .wp-block-navigation-item__content {
				padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
				border-radius: var(--wp--preset--border-radius--small);
				font-size: var(--wp--preset--font-size--medium);
				line-height: 1;
				transition: background-color var(--wp--custom--transition--hover);

				&:hover {
					background-color: var(--wp--preset--color--gray-lightest);

					.wp-block-navigation-item__label {
						text-decoration: underline;
						text-decoration-thickness: 1px;
						text-underline-offset: 2px;
					}
				}
			}
		}
	}

	/* Submenu container */
	.has-child:not(.open-on-click):is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
		inset-block-start: calc(100% + 40px);
		inset-inline: 0 auto;
		inline-size: var(--nav--sub--inline-size);
	}

	> .wp-block-navigation-item.has-child {
		--hover-path--inline-size: 300px;
		--hover-path--polygon: polygon(0 0, 0 100%, 100% 100%);

		position: relative;

		&:has(.wp-block-navigation-item__description) {
			--hover-path--inline-size: 500px;
		}

		&::before, &::after {
			display: none;
			position: absolute;
			content: '';
			cursor: default;
			z-index: 1;
		}

		/* Hit area */
		&::before {
			inset-block-start: 0;
			inset-inline-start: 0;
			block-size: calc(100% + var(--nav--sub--offset));
			inline-size: 100%;
		}

		/* Hover dropdown hit area */
		&::after {
			inset-block-start: var(--wp--preset--spacing--10);
			inset-inline-start: 0;
			block-size: calc(100% + 37px);
			inline-size: var(--hover-path--inline-size);
			clip-path: var(--hover-path--polygon);
		}
	}

	@media (hover:hover) {
		> .wp-block-navigation-item.has-child:hover {
			/* Hit area */
			&::before, &::after {
				display: block;
			}
		}
	}
}