@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;

/**
 * Appender
 */

.wp-block-navigation .block-list-appender {
	position: relative;
}

/**
 * Submenus.
 */

// Show submenus above the sibling inserter.
.wp-block-navigation .has-child {
	cursor: pointer;

	.wp-block-navigation__submenu-container {
		z-index: z-index(".has-child .wp-block-navigation__submenu-container");
	}

	&:hover {
		.wp-block-navigation__submenu-container {
			z-index: z-index(".has-child:hover .wp-block-navigation__submenu-container");
		}
	}

	// 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;
			overflow: visible !important;
		}
	}
}


/**
 * Navigation Items.
 */

.wp-block-navigation-item {
	.wp-block-navigation-item__content {
		cursor: text;
	}

	&.is-editing,
	&.is-selected {
		min-width: 20px;
	}

	.block-list-appender {
		margin-top: $grid-unit-20;
		// The right margin should be set to auto, so as to not shift layout in flex containers.
		margin-right: auto;
		margin-bottom: $grid-unit-20;
		margin-left: $grid-unit-20;
	}
}

.wp-block-navigation-link__invalid-item {
	color: #000;
}

/**
 * Menu item setup state. Is shown when a menu item has no URL configured.
 */

.wp-block-navigation-link__placeholder {
	position: relative;

	// While in a placeholder state, hide any underlines the theme might add.
	text-decoration: none !important;
	box-shadow: none !important;
	background-image: none !important;

	// Draw a wavy underline.
	.wp-block-navigation-link__placeholder-text {
		span {
			text-decoration: wavy underline;
			text-decoration-skip-ink: none;
			text-underline-offset: 0.25rem;
		}
	}

	// This needs extra specificity.
	&.wp-block-navigation-item__content {
		cursor: pointer;
	}
}

/**
* Link Control Transforms
*/

.link-control-transform {
	border-top: $border-width solid $gray-400;
	padding: 0 $grid-unit-20 $grid-unit-10 $grid-unit-20;
}

.link-control-transform__subheading {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: $font-weight-medium;
	color: $gray-900;
	margin-bottom: 1.5em;
}

.link-control-transform__items {
	display: flex;
	justify-content: space-between;
}

.link-control-transform__item {
	flex-basis: 33%;
	flex-direction: column;
	gap: $grid-unit-10;
	height: auto;
}

.link-ui-page-creator {
	// Match LinkControl width constraints for consistent UI sizing
	max-width: 350px;
	min-width: auto;
	width: 90vw;
	padding-top: $grid-unit-10;

	&__inner {
		padding: $grid-unit-20;
	}

	&__back {
		margin-left: $grid-unit-10;
		text-transform: uppercase;
	}
}

/**
 * Error text styling for missing entity help text.
 */
.navigation-link-control__error-text {
	color: $alert-red;
}

.navigation-link-to__action-button {
	grid-column: auto;
	// When this is the last button AND in an odd position among its class
	// siblings, it's unpaired — span the full grid row.
	&:nth-last-child(1 of #{&}):nth-child(odd of #{&}) {
		grid-column: 1 / -1;
	}

	// Artificially increase specificity to override `justify-content` styles.
	// Not ideal, but it shouldn't be necessary once switching to the new `Button`
	// component from `@wordpress/ui`.
	&#{&}#{&} {
		justify-content: center;
	}

}