@use "variables";

// Dropdown styles for the editor preview (customizer modal)
// Uses the same aliases as the frontend via the shared mixin
.is-style-priority-plus-navigation .priority-plus-navigation-dropdown,
.priority-plus-navigation-dropdown.is-open {
	@include variables.dropdown-aliases;

	position: absolute;
	overflow: hidden;
	top: 100%;
	right: 0;
	min-width: 200px;
	background: var(--ppn-dropdown-bg) !important;
	border-top: var(
		--wp--custom--priority-plus-navigation--dropdown--border-top,
		var(--ppn-dropdown-border-width) var(--ppn-dropdown-border-style) var(--ppn-dropdown-border-color)
	);
	border-right: var(
		--wp--custom--priority-plus-navigation--dropdown--border-right,
		var(--ppn-dropdown-border-width) var(--ppn-dropdown-border-style) var(--ppn-dropdown-border-color)
	);
	border-bottom: var(
		--wp--custom--priority-plus-navigation--dropdown--border-bottom,
		var(--ppn-dropdown-border-width) var(--ppn-dropdown-border-style) var(--ppn-dropdown-border-color)
	);
	border-left: var(
		--wp--custom--priority-plus-navigation--dropdown--border-left,
		var(--ppn-dropdown-border-width) var(--ppn-dropdown-border-style) var(--ppn-dropdown-border-color)
	);
	border-radius: var(--ppn-dropdown-radius);
	box-shadow: var(--ppn-dropdown-shadow);
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;

	&.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	// --- List items (general before specific) ---
	li {
		margin: 0;
		padding: 0;

		a,
		.priority-plus-navigation-preview-link {
			display: block;
			padding: var(--ppn-dropdown-item-spacing);
			color: var(--ppn-dropdown-item-color);
			font-weight: inherit;
			font-style: inherit;
			text-decoration: none;
			transition: background 0.2s ease, color 0.2s ease;

			&:hover {
				background: var(--ppn-dropdown-item-hover-bg);
				color: var(--ppn-dropdown-item-hover-color);
			}
		}
	}

	// Top-level separator
	> li {
		margin: 0;
		padding: 0;

		&:not(:first-child) {
			border-top-color: var(--ppn-dropdown-sep-color);
			border-top-width: var(--ppn-dropdown-sep-width);
			border-top-style: var(--ppn-dropdown-sep-style);
		}
	}

	// --- Accordion wrapper (link + arrow mode) ---
	.priority-plus-navigation-accordion-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	// Arrow mode: link stays functional, separate arrow button
	.priority-plus-navigation-accordion-link {
		flex: 1;
		padding: var(--ppn-dropdown-item-spacing);
		color: var(--ppn-dropdown-item-color);
		transition: background 0.2s ease, color 0.2s ease;

		&:hover {
			background: var(--ppn-dropdown-item-hover-bg);
			color: var(--ppn-dropdown-item-hover-color);
		}
	}

	.priority-plus-navigation-accordion-toggle-arrow {
		padding: var(--ppn-dropdown-item-spacing);
		background: transparent;
		border: none;
		cursor: pointer;
		font-size: inherit;
		font-family: inherit;
		color: var(--ppn-dropdown-item-color);
		flex-shrink: 0;
		transition: background 0.2s ease, color 0.2s ease;
		outline: none;

		.priority-plus-navigation-accordion-arrow {
			transition: transform 0.2s ease;
			display: inline-block;
		}

		&:hover {
			background: var(--ppn-dropdown-item-hover-bg);
			color: var(--ppn-dropdown-item-hover-color);
		}

		&:focus {
			background: var(--ppn-dropdown-item-hover-bg);
			color: var(--ppn-dropdown-item-hover-color);
		}

		&:focus-visible {
			outline: 2px solid currentcolor;
			outline-offset: -2px;
		}

		&[aria-expanded="true"] {
			.priority-plus-navigation-accordion-arrow {
				transform: rotate(90deg);
			}
		}
	}

	// --- Click mode: entire button is clickable ---
	.priority-plus-navigation-accordion-toggle-full {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: var(--ppn-dropdown-item-spacing);
		background: transparent;
		border: none;
		cursor: pointer;
		font-size: inherit;
		font-family: inherit;
		font-weight: inherit;
		font-style: inherit;
		color: var(--ppn-dropdown-item-color);
		text-align: left;
		transition: background 0.2s ease, color 0.2s ease;
		outline: none;

		.priority-plus-navigation-accordion-text {
			flex: 1;
		}

		/* stylelint-disable no-descending-specificity */
		.priority-plus-navigation-accordion-arrow {
			transition: transform 0.2s ease;
			display: inline-block;
			margin-left: 0.5rem;
		}
		/* stylelint-enable no-descending-specificity */

		&:hover {
			background: var(--ppn-dropdown-item-hover-bg);
			color: var(--ppn-dropdown-item-hover-color);
		}

		&:focus {
			background: var(--ppn-dropdown-item-hover-bg);
			color: var(--ppn-dropdown-item-hover-color);
		}

		&:focus-visible {
			outline: 2px solid currentcolor;
			outline-offset: -2px;
		}

		&[aria-expanded="true"] {
			.priority-plus-navigation-accordion-arrow {
				transform: rotate(90deg);
			}
		}
	}

	// --- Accordion content (submenu) ---
	.priority-plus-navigation-accordion-content {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0;

		// Nested accordion: transparent background to prevent alpha doubling
		&:where(.priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content) {
			background: transparent;
		}

		&[aria-hidden="true"] {
			display: none !important;
		}

		&.is-open {
			display: block !important;
		}

		// Submenu items: color + indentation + hover grouped per selector
		> li > a {
			color: var(--ppn-dropdown-sub-color);
			padding-left: calc(1rem + var(--ppn-dropdown-indent));

			&:hover {
				background: var(--ppn-dropdown-sub-hover-bg);
				color: var(--ppn-dropdown-sub-hover-color);
			}
		}

		> li > .priority-plus-navigation-preview-link {
			color: var(--ppn-dropdown-sub-color);
			padding-left: calc(1rem + var(--ppn-dropdown-indent));

			&:hover {
				background: var(--ppn-dropdown-sub-hover-bg);
				color: var(--ppn-dropdown-sub-hover-color);
			}
		}

		> li > .priority-plus-navigation-accordion-toggle-full {
			color: var(--ppn-dropdown-sub-color);
			padding-left: calc(1rem + var(--ppn-dropdown-indent));

			&:hover,
			&:focus {
				background: var(--ppn-dropdown-sub-hover-bg);
				color: var(--ppn-dropdown-sub-hover-color);
			}
		}

		> li > .priority-plus-navigation-accordion-wrapper {
			> a {
				padding-left: calc(1rem + var(--ppn-dropdown-indent));
			}

			> .priority-plus-navigation-accordion-link {
				color: var(--ppn-dropdown-sub-color);

				&:hover {
					background: var(--ppn-dropdown-sub-hover-bg);
					color: var(--ppn-dropdown-sub-hover-color);
				}
			}

			> .priority-plus-navigation-accordion-toggle-arrow {
				color: var(--ppn-dropdown-sub-color);

				&:hover,
				&:focus {
					background: var(--ppn-dropdown-sub-hover-bg);
					color: var(--ppn-dropdown-sub-hover-color);
				}
			}
		}

		// Multi-level indentation — deeper nesting levels
		/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
		.priority-plus-navigation-accordion-content {
			> li > a,
			> li > .priority-plus-navigation-preview-link,
			> li > .priority-plus-navigation-accordion-wrapper > a,
			> li > .priority-plus-navigation-accordion-toggle-full {
				padding-left: calc(1rem + (var(--ppn-dropdown-indent) * 2));
			}

			.priority-plus-navigation-accordion-content {
				> li > a,
				> li > .priority-plus-navigation-preview-link,
				> li > .priority-plus-navigation-accordion-wrapper > a,
				> li > .priority-plus-navigation-accordion-toggle-full {
					padding-left: calc(1rem + (var(--ppn-dropdown-indent) * 3));
				}

				.priority-plus-navigation-accordion-content {
					> li > a,
					> li > .priority-plus-navigation-preview-link,
					> li > .priority-plus-navigation-accordion-wrapper > a,
					> li > .priority-plus-navigation-accordion-toggle-full {
						padding-left: calc(1rem + (var(--ppn-dropdown-indent) * 4));
					}
				}
			}
		}
		/* stylelint-enable no-descending-specificity, no-duplicate-selectors */
	}

	// First-level accordion content only gets the submenu background color
	> li > .priority-plus-navigation-accordion-content {
		background: var(--ppn-dropdown-sub-bg);
	}
}

// Editor wrapper: flex container that clips nav items and shows the fake More button
.priority-plus-navigation-editor-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;

	// Let the nav block fill available space but allow it to shrink
	> .block-editor-block-list__block,
	> [data-block] {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}

	// Override right/center justification so items flow left-to-right
	// and overflow clips on the right side (where the More button lives)
	.wp-block-navigation__container {
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
	}

	.wp-block-navigation-item {
		flex-shrink: 0;
		white-space: nowrap;
	}

	// Fake More button - inherits nav typography via computed styles
	.priority-plus-navigation-editor-more-button {
		flex-shrink: 0;
		// Match the gap used between nav items
		margin-left: 0.75em;
	}
}

// Disable the "Always" option in overlay menu settings for Priority+ nav
// Applied when Priority+ variation is selected
.priority-plus-navigation-disable-always-option {
	.components-toggle-group-control-option-base:last-child {
		opacity: 0.4;
		pointer-events: none;
		text-decoration: line-through;
		cursor: not-allowed;
	}
}