@use "@wordpress/base-styles/mixins" as *;

.wp-block-navigation-submenu {
	display: block;

	.wp-block-navigation__submenu-container {
		z-index: 28;
	}

	// Show on editor selected, even if on frontend it only stays open on focus-within.
	&.is-selected,
	&.has-child-selected {
		> .wp-block-navigation__submenu-container {
			// We use important here because if the parent block is selected and submenus are present, they should always be visible.
			visibility: visible !important;
			opacity: 1 !important;
			min-width: 200px !important;
			height: auto !important;
			width: auto !important;
			// These styles are needed to display the dropdown properly when it is empty.
			position: absolute;
			left: -1px; // Border width.
			top: 100%;

			@include break-medium {
				.wp-block-navigation__submenu-container {
					left: 100%;
					top: -1px; // Border width.

					// Prevent the menu from disappearing when the mouse is over the gap
					&::before {
						content: "";
						position: absolute;
						right: 100%;
						height: 100%;
						display: block;
						width: 0.5em;
						background: transparent;
					}
				}
			}
		}
	}
}