:root {
	--sub-menu-position: absolute;
	--sub-menu-left: -999rem;
	--sub-menu-width: 200px;
	--sub-menu-margin: 0 0 0 calc(0 - var(--spacing-md));
	--sub-menu-background-color: var(--color-white);
	--sub-menu-border: var(--border);
	--sub-menu-border-radius: var(--border-radius);
	--sub-menu-opacity: 0;
	--sub-menu-transition: opacity var(--transition-duration) var(--transition-timing-function);
	--sub-menu-animation: fadein 0.2s ease-in-out;

	--sub-menu-toggle-position: relative;

	--sub-sub-menu-top: -1px;
	--sub-sub-menu-left: 100%;
}

.sub-menu {
	--menu-item-width: 100%;
	--menu-item-link-width: 100%;
	--menu-item-link-color: var(--sub-menu-link-color, var(--color-body));
	--menu-item-link-color-hover: var(--sub-menu-link-color-hover, var(--color-primary));
	--menu-item-link-padding: var(--spacing-sm) var(--spacing-md);

	position: var(--sub-menu-position, relative);
	top: var(--sub-menu-top, 100%);
	left: var(--sub-menu-left, auto);
	z-index: 9;
	display: var(--sub-menu-display, none);
	flex: 1 1 100%;
	flex-wrap: wrap;
	width: var(--sub-menu-width, 18rem);
	margin: var(--sub-menu-margin, 0);
	padding: var(--sub-menu-padding, var(--spacing-xxs) 0);
	font-size: var(--sub-menu-font-size, 0.9em); /* 90% of whatever the menu is set to. */
	list-style-type: var(--sub-menu-list-style, none);
	background: var(--sub-menu-background, var(--color-white));
	border: var(--sub-menu-border, 0);
	border-radius: var(--sub-menu-border-radius, 0);
	opacity: var(--sub-menu-opacity, 1);
	animation: var(--sub-menu-animation, none);

	// Mobile menu JS adds .visible class.
	&.visible {
		left: var(--sub-menu-visible-left, auto);
		display: var(--sub-menu-visible-display, flex);
		opacity: var(--sub-menu-visible-opacity, 1);
	}
}

.sub-menu .sub-menu {
	top: var(--sub-sub-menu-top, auto);
	left: var(--sub-sub-menu-left, auto);
	white-space: var(--sub-sub-menu-white-space, normal);
}

.menu-item:hover > .sub-menu,
.menu-item:focus-visible > .sub-menu,
.menu-item:focus-within > .sub-menu {
	display: flex; /* can't be variable because 3rd level sub-menus will display too */
	--sub-menu-opacity: 1;
	--sub-menu-left: auto;
}

.mobile-menu {
	--sub-menu-position: static;
	--sub-menu-width: 100%;
	--sub-menu-opacity: 1;
}

.menu-list,
.sidebar {
	--sub-menu-position: static;
	--sub-menu-display: block;
	--sub-menu-width: auto;
	--sub-menu-margin: 0 0 0 var(--spacing-lg);
	--sub-menu-padding: 0;
	--sub-menu-background: none;
	--sub-menu-list-style: disc;
	--sub-menu-border: none;
	--sub-menu-opacity: 1;

	.sub-menu {
		--menu-item-display: list-item;
		--menu-item-link-padding: var(--spacing-xs) 0;

		text-align: start;
	}
}