/**
 * core/navigation - Main
 */

.wp-block-navigation.bam-nav-main {
	--nav--sub--icon-size: 0.875rem;

	&.wp-block-navigation__container {
		gap: clamp(0.875rem, 0.0649rem + 1.2658vw, 1.125rem);
	}

	/* Enable descriptions */
	> .wp-block-navigation-item .wp-block-navigation-item__description {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 400;
		line-height: 1.43;
	}

	.wp-block-navigation__submenu-icon {
		block-size: var(--nav--sub--icon-size);
		inline-size: var(--nav--sub--icon-size);
	}

	> .wp-block-navigation-item {
		> .wp-block-navigation-item__content {
			padding: 0.875em;
			border-radius: var(--wp--preset--border-radius--small);
			line-height: 1;
			white-space: nowrap;
			transition: background-color var(--wp--custom--transition--hover);

			&,
			> .wp-block-navigation-item__label {
				font-size: clamp(0.875rem, 0.0649rem + 1.2658vw, 1.125rem)
			}
		}

		&:is(:hover, :focus-within) > .wp-block-navigation-item__content {
			background: var(--wp--preset--color--gray-lightest);
		}

		&.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: 2;
				}
			}
		}

		/* Submenu container */
		> .wp-block-navigation__submenu-container {
			> .wp-block-navigation-item {
				&:has(.wp-block-navigation-item__description) + .wp-block-navigation-item {
					padding-block-start: var(--wp--preset--spacing--10);
					border-block-start: 1px solid var(--wp--preset--color--gray-lighter);
				}

				> .wp-block-navigation-item__content {
					&:has(.wp-block-navigation-item__description) {
						flex-direction: column;
						gap: var(--wp--preset--spacing--10);
						padding-block: var(--wp--preset--spacing--20);
						background-color: var(--wp--preset--color--gray-lightest);

						.wp-block-navigation-item__label {
							font-size: var(--wp--preset--font-size--large);
						}
					}

					&:hover {
						/* If has a description */
						&:has(.wp-block-navigation-item__description) {
							background-color: var(--wp--preset--color--gray-lighter);
						}
					}
				}
			}
		}
	}

	.has-child:not(.open-on-click):is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
		/* If has a description */
		&:has(.wp-block-navigation-item__description) {
			--nav--sub--inline-size: 500px;

			inset-inline: 0 auto;
		}
	}
}