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

    /*margin-trim: block;
    text-box: trim-start cap alphabetic;*/

    * {
    	--spacing: var(--spacing, var(--padding));
    }

    .menu-list {
        anchor-scope: --active-item;
       	container: inline-size / menu-list;

		list-style: none outside;
		padding: var(--spacing, 0px);
		margin: 0;
    }

    .top-menu {
    	anchor-name: --nav-menu;

	    display: flex;
	    flex-wrap: wrap;
	    align-items: stretch;
	    gap: 0.5em;
    }

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

    .sub-menu {
    	--_sub-menu-size: 250px;
     	--_sub-menu-spacing: var(--spacing, 0.5em);
     	anchor-name: --sub-menu;

		position-anchor: --menu-item;
		position-try-fallbacks: flip-inline, flip-block;
		inset-block: anchor(end) auto;
		inset-inline: anchor(start) auto;

		background: var(--sub-menu-background, Canvas);
		color: var(--sub-menu-color, CanvasText);
		padding: var(--_sub-menu-spacing, 0.5em);
		margin-block: var(--_sub-menu-spacing, 0.5em);
		box-shadow: var(--shadow-layer);

		overflow: clip; /* Mostly for the animation */
		transform-origin: top center;

		&:popover-open {
			display: flex;
			gap: 0.25em;
		}

		&.is-nested {
			inset-block: anchor(--menu-item start) auto;
			inset-inline: anchor(--sub-menu end) auto;
			margin-inline-start: -0.5em;
		}

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

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

		&.menu-width-viewport {
			inset-inline: 0;
			border-radius: 0;
		}

    }

    .sub-menu.list-columns {
    	--_sub-menu-column-spacing: var(--_sub-menu-spacing, 0.5em);
     	--_sub-menu-columns: repeat( auto-fit, minmax( var(--_sub-menu-size), 1fr ) );

    	width: unset;
    	padding: var(--_sub-menu-column-spacing);
    	gap: var(--_sub-menu-column-spacing);

      	&.menu-width-regular {
         	--width--max: 100vw;
         	/*--child-lists: 3;*/
         	--child-lists: sibling-count();

        	width: calc( var(--_sub-menu-size) * var(--child-lists) );
        	max-width: 100vw;
      	}

        &.menu-width-viewport {

        	/* The width of the cnntent */
        	--content-area: var(--content-width);

         	/* The width of the entire thing */
          	--border-area: 100vw;

           	/* The difference between the border area and the content area */
            --area-diff: calc( var(--border-area) - var(--content-area) );

             /* The difference on each side of the content area */
             --area-side-diff: calc( var(--area-diff) / 2 );

             padding-inline: var(--area-side-diff);

        	/*--submenu-columns-container-difference: 100vw - var(--content-width);
         	--submenu-columns-container-margin: calc( var(--submenu-columns-container-difference) / 2 );
        	--submenu-columns: var(--submenu-columns-container-margin) var(--submenu-columns) var(--submenu-columns-container-margin);*/
        }

        & > .menu-item {
			box-sizing: border-box;
			align-content: start;
			/*padding: var(--spacing, var(--padding));*/
		}

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

			padding: unset;
			margin: unset;
        }

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

			/*padding-inline: var(--spacing, var(--padding));
			padding-block: 0.25em;
			margin-block-start: 0;
			margin-block-end: 0.25em;*/

			font-size: small;
			color: color-mix(in srgb, transparent 50%, currentColor);
        }

       	/*&:popover-open {
			display: grid;
			grid-template-columns: var(--submenu-columns);
			align-items: stretch;
			gap: var(--submenu-column-gap);
       	}*/

        &:popover-open {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: stretch;

			& > .menu-item {
				flex-basis: var(--_sub-menu-size);
				flex-grow: 1;
				flex-shrink: 1;
				outline: 1px solid var(--color-border);
			}
        }
	}

	.menu-item {
		--_menu-item-spacing: var(--spacing, var(--padding) );
		--_menu-item-spacing-block-modifier: 0.75;

		--_menu-item-column-start: [start title];
		--_menu-item-column-end: [end];

		contain: layout;
		padding: 0;

		display: grid;
		align-items: stretch;
		align-content: center;
		column-gap: 0.5em;
		row-gap: 0;
		grid-template-columns: var(--_menu-item-column-start) 1fr var(--_menu-item-column-end);
		grid-template-rows: auto;

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

		.menu-item-link, .menu-item-dropdown {
			grid-row: 1;
		}

		.menu-item-link {
			grid-column: start / dropdown;
			&:is(button) {
				grid-column: start / end;
			}
		}

		.menu-item-icon {
			grid-column: start;
		}
		.menu-item-icon.thumbnail {
			grid-column: start / dropdown;
		}
		.menu-item-title {
			grid-column: title;
		}
		.menu-item-dropdown {
			grid-column: dropdown;
		}
    }

    .menu-item-link {
    	display: grid;
		grid-template-columns: subgrid;
		align-items: stretch;
		justify-content: start;

		cursor: pointer;
		text-decoration: none;

		padding-block: calc(var(--_menu-item-spacing, 0px) * var(--_menu-item-spacing-block-modifier, 1));
		padding-inline: var(--_menu-item-spacing, 0px);
	}

	.menu-item-icon {
		display: inline grid;
		align-content: center;
		box-sizing: border-box;
		&.icon {
			width: 1lh;
		}
	}

	.menu-item-title {
		display: inline grid;
		align-content: center;
		grid-template-columns: 1fr;
	}

	.menu-item-dropdown {
		display: inline grid;
		align-content: center;
		justify-content: end;
		z-index: 1;
		& svg {
			width: 1lh;
			height: 1lh;
		}
		&:is(span) {
			pointer-events: none;
		}
	}

}

.menu-item {
	--_menu-item-back: transparent;
	--_menu-item-text: var(--menu-item-base, inherit);

	--_menu-item-back--hover: transparent;
	--_menu-item-text--hover: var(--menu-item-hover, inherit);

	--_menu-item-back--active: transparent;
	--_menu-item-text--active: var(--menu-item-active, inherit);

	background-color: var(--_menu-item-back);
	color: var(--_menu-item-text);

	&:has([aria-current]) {
		background-color: var(--_menu-item-back--active);
		color: var(--_menu-item-text--active);
	}

	&:is(:hover, :focus-within) {
		background-color: var(--_menu-item-back--hover);
		color: var(--_menu-item-text--hover);
	}

	.has-buttons-item-style & {
		--_menu-item-back: var(--menu-item-base, transparent);
		--_menu-item-text: contrast-color( var(--menu-item-base) );

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

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

		overflow: clip;
		border-radius: var(--border-radius);
		corner-shape: var(--corner-shape);
		margin: 0.25em;
	}

	.has-underlined-item-style & {
		--_menu-item-back: transparent;
		--_menu-item-text: var(--menu-item-base, inherit);

		--_menu-item-back--hover: transparent;
		--_menu-item-text--hover: var(--menu-item-hover, inherit);

		--_menu-item-back--active: transparent;
		--_menu-item-text--active: var(--menu-item-active, inherit);

		contain: layout;

		&::after {
			content: "";
			display: block;
			position: absolute;
			inset-block: auto 0;
			inset-inline: 0;
			background: currentColor;
			border-radius: 10vw;
		}
	}

}


/* Mobile view and Left sidebar navigation */
@container menu-list (max-width: 250px) {

}