// Needed until this is merged: https://github.com/WordPress/gutenberg/issues/35040
.is-vertical.items-justified-right ul.wp-block-navigation__container {
	align-items: flex-end;
}

.wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
	&.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

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

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

				&.current-menu-item > a {
					text-decoration: underline;
				}
			}
		}
		.wp-block-navigation__responsive-container-content {
			flex-wrap: nowrap;
			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);
			}
		}
	}
}