@layer components.mega-menu {
	@scope (mega-menu) {
		--mega-menu-margin-inline: attr(margin-inline type(<length>), 0);
		--mega-menu-max-width: attr(max-width type(<length>), none);
		--mega-menu-menubar-height: attr(menubar-height type(<length>), 3rem);
		--mega-menu-view-width: attr(mobile-view-width type(<length>), 60vw);
		--mega-menu-z-index: attr(z-index type(<integer>), 1000);

		* { box-sizing: border-box; }

		[data-menu="menubar"] {
			align-items: var(--mega-menu-menubar-ai, center);
			display: flex;
			height: var(--mega-menu-menubar-height, 3rem);
			justify-content: var(--mega-menu-menubar-jc, space-between);
			padding-inline: var(--mega-menu-menubar-pi, 0);
			position: relative;
			user-select: none;
			z-index: var(--mega-menu-z-index);
			[bleed] & {
				margin-inline: min(
					-1 * var(--mega-menu-margin-inline),
					var(--mega-menu-max-width) / 2 - 50cqi
				);
				padding-inline: max(
					var(--mega-menu-margin-inline),
					calc((100cqi - var(--mega-menu-max-width)) / 2)
				);
			}
		}
		[data-menu="skip"] {
			left: 50%;
			position: absolute;
			translate: calc(0px - 100vw) calc(0px - var(--mega-menu-menubar-height));
			&:focus-visible {
				translate: -50% 0;
				z-index: calc(var(--mega-menu-z-index) + 1);
			}
		}
		[data-menu="view"] {
			border: 0;
			height: 100svh;
			inset: 0 auto 0 0;
			width: var(--mega-menu-view-width);

			@starting-style {
				&:popover-open {
					translate: -100% 0;
				}
			}
			[mobile-view-entry="right"] & {
				inset: 0 0 0 auto;
				@starting-style {
					&:popover-open {
						translate: 100% 0;
					}
				}
			}
		}

		@media (min-width: 720px) {
			[data-menu="content"] {
				inset: 100% auto auto 0;
				min-height: var(--mega-menu-content-mih, initial);
				padding-block: var(--mega-menu-content-pb, 1lh);
				position: absolute;
				width: 100%;

				/* Safari Fix */
				@supports (font: -apple-system-body) and (-webkit-appearance: none) {
					width: calc(var(--mega-menu-max-width) - 1rem);
				}
				details[data-menu="section"]::details-content {
					content-visibility: visible;
				}
				details[data-menu="section"] summary { pointer-events: none; }
				[bleed] & {
					margin-inline: auto;
					padding-inline: max(
						var(--mega-menu-panel-pi, var(--mega-menu-margin-inline)),
						calc((100cqi - var(--mega-menu-max-width)) / 2)
					);
				}
			}
			[data-menu="nav"] {
				column-gap: var(--mega-menu-nav-cg, 2ch);
				display: flex;
				flex-direction: row;
			}
			[data-menu="trigger"] { display: none; }
			[data-menu='view'] { display: contents; }
		}
	}
}