// See https://github.com/WordPress/gutenberg/issues/39052
.wp-block-navigation {

	&.is-responsive {

		.wp-block-navigation__responsive-container.is-menu-open {
			padding-left: var(--wp--custom--gap--horizontal);
			padding-right: var(--wp--custom--gap--horizontal);
		}

		ul.wp-block-social-links {
			margin: 0;
			gap: var(--wp--custom--gap--baseline);
		}
	}

	&.is-responsive .is-menu-open {
		font-size: var(--wp--preset--font-size--medium);

		.wp-block-navigation__responsive-container-content {
			align-items: var(--navigation-layout-justification-setting, flex-start);
			justify-content: space-between;
			flex-wrap: nowrap;
		}

		.wp-block-navigation__container {
			row-gap: 0.5rem;
			align-items: var(--navigation-layout-justification-setting, flex-start);
			flex: unset;
			padding-bottom: 0;
		}

		.wp-block-navigation-item {
			align-items: var(--navigation-layout-justification-setting, flex-start);
		}

		.wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
			.wp-block-navigation__submenu-container {
				font-size: var(--wp--custom--font-sizes--normal);
				padding-bottom: 0;
				padding-left: var(--wp--custom--gap--horizontal);
				padding-top: 0.5rem;
				row-gap: 0.5rem;
			}
		}

		ul.wp-block-social-links {
			justify-content: flex-start;
		}
	}
}

/* Additional styling for header-minimal */
.wp-block-navigation.blockbase-responsive-navigation-minimal {

	&.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 200;

		.wp-block-navigation__container {
			row-gap: 1rem;
		}

		.wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS
			align-items: flex-start;
			margin: 0 auto;
			max-width: 800px; // This should match the content width
			flex-wrap: nowrap;

			.wp-block-navigation-item {
				row-gap: 0;

				> a:hover {
					text-decoration-line: underline;
				}

				&.current-menu-item > a {
					text-decoration: underline;
				}
			}

			.wp-block-navigation__container {
				flex-grow: 1;
				justify-content: center;
			}
		}

		ul.wp-block-social-links {
			padding-bottom: calc(var(--wp--custom--gap--vertical) * 2);
		}

		.wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
			.wp-block-navigation__submenu-container {
				font-size: var(--wp--preset--font-size--medium);
			}
		}
	}
}

/* Additional Styling for header-linear */
.wp-block-navigation.blockbase-responsive-navigation-linear {

	.wp-block-pages-list__item .wp-block-pages-list__item__link,
	.wp-block-navigation-link__content {

		&:hover {
			text-decoration: underline;
		}
	}

	&.is-responsive .wp-block-navigation__responsive-container.is-menu-open {

		&.has-modal-open {

			.wp-block-navigation-item a {
				font-size: var(--wp--custom--font-sizes--normal);
				line-height: 50px;
				margin: 0;
				align-items: flex-end;
			}

			.wp-block-pages-list__item,
			.wp-block-navigation-item {
				font-size: var(--wp--custom--font-sizes--normal);
				line-height: 50px;
				margin: 0;
				align-items: flex-end;

				&.has-child {

					.wp-block-pages-list__item__link,
					.wp-block-navigation-link__content {
						margin-right: 0;
					}

					.wp-block-navigation__submenu-container {
						gap: 0;
						padding: 0 19px 0 0;

						.wp-block-pages-list__item__link,
						.wp-block-navigation-item__content {
							padding: 0;
							font-size: var(--wp--custom--font-sizes--x-small);
							line-height: 40px;
						}
					}
				}
			}

			.wp-block-navigation__container {
				align-items: flex-end;
			}

			.wp-block-navigation__responsive-container-content {
				flex-direction: row-reverse;
			}

		}

		.wp-block-social-links {
			flex-direction: column;
		}
	}
}