// core/navigation
// core/navigation-link
// core/navigation-submenu
//
// @version  2.0.1

//
// The CSS selector specificity in this file is tragic, but needed
// to override WordPress native navigation block styles.
//

@import '../_tools/_index';
@import '../_setup/_index';

.wp-block-navigation {

	// Make sure the navigation (and submenus) are stacked over any search form in site header.
	.is-style-site-header & {

		&:hover,
		&:focus-within {
			z-index: 5;
		}
	}

	// Color styles.
	&,
	.editor-styles-wrapper[class] & {

		&.has-background[class] {
			padding-block: $ratio_maj + em;

			// This is needed to fix front-end:
			.wp-block-navigation__container.has-background {
				padding: 0;
			}
		}

		&-item.has-background,
		.has-child .has-child.has-background,
		.wp-block-navigation__responsive-container:not(.hidden-by-default, .is-menu-open) {
			padding: 0;
			background: transparent;
		}
			.has-child .has-child.has-background {
				background: transparent !important;
			}

		&-item.has-text-color {
			color: inherit;
		}
			.has-child .has-child.has-background {
				color: inherit !important;
			}
	}

	& & {
		font-size: 1em; // Yes, this fix is really needed, unfortunately...
	}

	&.has-block-gap {
		--wp--style--block-gap: var( --theme--css--block-gap, 1rem );
	}
}

@import '_navigation-mobile';
