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

.wp-block-navigation {
	// space-between justification.
	&.items-justified-space-between {
		.wp-block-page-list > div,
		.wp-block-page-list {
			display: contents;
			flex: 1;
		}

		&.has-child-selected .wp-block-page-list > div,
		&.has-child-selected .wp-block-page-list,
		&.is-selected .wp-block-page-list > div,
		&.is-selected .wp-block-page-list {
			flex: inherit;
		}
	}
}

.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
	display: block; // This is needed to make sure the page list container is 100% wide, so that the children are correctly positioned.
}

// Make links unclickable in the editor.
.wp-block-pages-list__item__link {
	pointer-events: none;
}

// Modal that shows conversion option.
.wp-block-page-list-modal {
	@include break-small() {
		max-width: $break-mobile;
	}
}

.wp-block-page-list-modal-buttons {
	display: flex;
	justify-content: flex-end;
	gap: $grid-unit-15;
}

// Simulate open on click behaviour in the editor by opening on focus instead.

.wp-block-page-list {
	.open-on-click:focus-within {
		> .wp-block-navigation__submenu-container {
			visibility: visible;
			opacity: 1;
			width: auto;
			height: auto;
			min-width: 200px;
		}
	}
}

// Space spinner to give it breathing
// room when block is selected and has focus outline.
.wp-block-page-list__loading-indicator-container {
	padding: $grid-unit-10 $grid-unit-15;
}