nav {
	anchor-scope: --nav-menu;
    padding: var(--spacing, 0px);
    isolation: isolate;

    /*margin-trim: block;
    text-box: trim-start cap alphabetic;*/
    * {
    	--spacing: initial;
    }

    .menu-list {
    	anchor-scope: --menu-item-active;
     	anchor-name: --nav-menu;

       	container: --menu-list / inline-size;
        contain: layout;

		list-style: none outside;
		padding: 0;
		margin: 0;

		&:is(.top-menu) {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;

			/* Sets default spacing while still allowing no spacing to be set */
			--gap-min: min( 0.25em, var(--spacing, 0.25em) );
			/* 1.75 is currently the highest value --spacing can be, so this should be fine */
			--gap-max: 2em;
			/* Basically, use --spacing when set, ignore otherwise */
			--gap-pref: max( 0px, var(--spacing, 0px) );

			gap: clamp(var(--gap-min), var(--gap-pref), var(--gap-max));

		}

		&:is(.sub-menu) {
		   	--sub-menu-size: 250px;
     		--sub-dynamic-columns: repeat(auto-fit, minmax(var(--sub-menu-size), 1fr) );
       		/*--sub-limited-columns: repeat(
         		auto-fill,
           		minmax(
             		max(
               			min(18rem, 100%),
                  		(100% - (var(--spacing, 0px) * (var(--_col-count) - 1) )) / var(--_col-count)
                    ),
               		1fr
                )
            );*/

			anchor-name: --sub-menu;

            box-sizing: content-box;
         	container-type: inline-size;

			background: var(--sub-menu-background-color, Canvas);
			color: var(--sub-menu-text-color, CanvasText);
			box-shadow: var(--shadow-float);

			padding: 0.5em;
			margin: 0;
			row-gap: 0.5em;
			column-gap: 0;

			position-anchor: --menu-item;
			position-try-fallbacks: flip-inline, flip-block;
			inset-block: anchor(end) auto;
			inset-inline: anchor(start) auto;
			&:is(.is-nested) {
				inset-block: anchor(start) auto;
				inset-inline: anchor(end) auto;
			}

			overflow: clip; /* Mostly for the animation */

			&:popover-open {
				display: var(--_sub-block-type, flex);
				flex-wrap: wrap;
				align-items: stretch;
			}
		}
    }

    .sub-menu.menu-width-regular {
		width: min( var(--sub-menu-size), 100vw );

		&.list-columns {
			--spacing: 0px;
			--_col-count: min(3, sibling-count());
			--_col-width: calc(var(--sub-menu-size) + var(--spacing));
			--_min-width: calc( (var(--_col-width) * var(--_col-count)) - var(--spacing) );
			--_max-width: 100vw; /* BUG: Doesn't work properly, the left / right anchor needs to be accounted for */
			width: min( var(--_min-width), var(--_max-width) );
		}
	}

	.sub-menu.menu-width-stretch {
		position-anchor: --nav-menu;
		inset-inline: anchor( left ) anchor( right );
	}

	.sub-menu.menu-width-viewport {
		inset-inline: 0;
		border-radius: 0;
		padding-inline: 0;
		padding-block: calc( var(--spacing) * 2 );

		&.list-columns {
            padding-inline: calc( calc( 100vw - var(--content-width) ) / 2 );
        }
	}

    .sub-menu.list-columns {
    	width: unset;
     	flex-direction: row;

		/**
		* NOTE:
		* Because font-size differences and using EMS for padding fucked things up
		* ... and I can't be bothered to properly fix it right now
		**/
		& .menu-item {
			--menu-item-spacing: 1rem;
		}

        /* Individual columns */
        & > .menu-item {
        	flex: 0 0 var(--sub-menu-size);
			align-content: start;

			& > .menu-label-item {
				grid-column: 1 / -1;

				pointer-events: none;
				margin: 0;
				padding-block: calc(var(--menu-item-spacing, 0px) * var(--menu-item-spacing-block-modifier, 1));
				padding-inline: var(--menu-item-spacing, 0px);

				color: color-mix(in srgb, transparent 50%, var(--sub-menu-text-color, CanvasText));
				font-weight: normal;
				text-transform: uppercase;
				font-size: smaller;

				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
	        }

			& > .sub-menu {
				grid-column: 1 / -1;
				width: unset;
				background-color: transparent;
				box-shadow: none;
				padding: 0;
				margin: 0;
        	}
		}
	}

	.menu-item-icon {
		grid-column: start;

		box-sizing: border-box;
		align-content: center;

		&:is(.icon) {
			width: 1lh;
		}
		&:not(.icon) {
			grid-column: start / dropdown;
		}
	}

	.menu-item-title {
		grid-column: title;
		display: inline grid;
	}

	.menu-item-dropdown {
		grid-column: dropdown;
		grid-row: 1;

		align-content: center;
		z-index: 1;
		padding-inline: var(--menu-item-spacing, 0px);

		& svg {
			width: 1lh;
			height: 1lh;
		}
		&:is(span) {
			pointer-events: none;
		}
		.sub-menu & {
			rotate: -90deg;
		}
	}

}

.menu-item {
	--menu-item-text-color: var(--menu-item-base, inherit);
	--menu-item-text-color--hover: var(--menu-item-hover, inherit);
	--menu-item-text-color--active: var(--menu-item-active, inherit);

	--menu-item-spacing: var(--spacing, var(--padding) );

	anchor-scope: --menu-item;
	/* TODO: Do we need this? */
	/*contain: layout;*/

	display: grid;
	grid-template-columns: var(--menu-item-column-start, [start title]) 1fr var(--menu-item-column-end, [end]);
	/*grid-template-rows: auto;*/
	place-content: center start;
	place-items: stretch;

	gap: 0 0.5em;
	padding: 0;
	margin: 0;

	border-radius: var(--border-radius);
	corner-shape: var(--corner-shape);

	background-color: var(--menu-item-background-color, transparent);
	color: var(--menu-item-text-color);

	&:has([aria-current]) {
		background-color: var(--menu-item-background-color--active, transparent);
		color: var(--menu-item-text-color--active);
	}
	&:is(:hover) {
		background-color: var(--menu-item-background-color--hover, transparent);
		color: var(--menu-item-text-color--hover);
	}

	/* NOTE: Very temporary */
	&:is(:focus-within) {
		outline: 4px solid currentColor;
	}
	& :is(:focus) {
		outline: 4px solid currentColor;
	}

	&:has(.menu-item-icon) {
		--menu-item-column-start: [start] auto [title];
	}
	&:has(.menu-item-dropdown) {
		--menu-item-column-end: [dropdown] auto [end];
	}

}

.has-buttons-item-style .menu-item {
	/* Missing optional colors invalidate these helpers, enabling the text fallbacks below. */
	--_menu-item-contrast: contrast-color( var(--menu-item-base) );
	--_menu-item-contrast--hover: contrast-color( var(--menu-item-hover) );
	--_menu-item-contrast--active: contrast-color( var(--menu-item-active) );

	--menu-item-background-color: var(--menu-item-base, transparent);
	--menu-item-text-color: var(--_menu-item-contrast, inherit);

	--menu-item-background-color--hover: var(--menu-item-hover, var(--menu-item-background-color));
	--menu-item-text-color--hover: var(--_menu-item-contrast--hover, var(--menu-item-text-color));

	--menu-item-background-color--active: var(--menu-item-active, var(--menu-item-background-color));
	--menu-item-text-color--active: var(--_menu-item-contrast--active, var(--menu-item-text-color));

	overflow: clip;
}

.has-underlined-item-style:not(:has(:hover)) .menu-item:has([aria-current]) {
	anchor-name: --menu-item-active;
}
.menu-item:is(:hover) {
	anchor-name: --menu-item-active;
}

.has-underlined-item-style {

	&::after {
		content: "";
		pointer-events: none;
		z-index: 0;

		position-anchor: --menu-item-active;
		position: absolute;

		inset-block: auto anchor(end);
		inset-inline: calc( anchor(inside) + 0px);
		block-size: 4px;

		background-color: var(--menu-item-hover, inherit);

		transition-property: all;
		transition-duration: 300ms;
	}
}

.has-underlined-item-style .menu-item {
	/*--menu-item-background-color: transparent;*/
	/*--menu-item-text-color: var(--menu-item-base, inherit);*/

	/*--menu-item-background-color--hover: transparent;*/
	/*--menu-item-text-color--hover: var(--menu-item-hover, inherit);*/

	/*--menu-item-background-color--active: transparent;*/
	/*--menu-item-text-color--active: var(--menu-item-active, inherit);*/

	--menu-item-block-spacing: calc(var(--menu-item-spacing, 0px) * var(--menu-item-spacing-block-modifier, 0.75));
	--menu-item-inline-spacing: var(--menu-item-spacing, 0px);
}

.menu-item-link {
   	anchor-name: --menu-item;

	cursor: pointer;
	text-decoration: none;

   	grid-column: start / dropdown;
	grid-row: 1;

   	display: grid;
	grid-template-columns: subgrid;

	padding-block: calc(var(--menu-item-spacing, 0px) * var(--menu-item-spacing-block-modifier, 0.75));
	padding-inline: var(--menu-item-spacing, 0px);

	&:is(button) {
		grid-column: start / end;
	}
}