.wp-block-navigation {
	// Block wrapper gets the classes in the editor, and there's an extra div wrapper for now, so background styles need to be inherited.
	.wp-block-page-list > div,
	.wp-block-page-list {
		background-color: inherit;
	}

	// 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;
		}
	}
}

// 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;
		}
	}
}

.wp-block-page-list .components-notice {
	margin-left: 0;
}