@layer components {
	:is(nav, [role="navigation"]) {
		font-size: 1rem;
	}

	:is(nav, [role="navigation"]) ul {
		list-style: none;
	}

	:is(nav, [role="navigation"]) a {
		text-decoration: none;
	}

	.nav-utility {
		font-size: 1em;
	}

	.nav-horizontal > ul {
		display: flex;
		gap: var(--space-m);
	}

	.nav-horizontal > ul li {
		position: relative;
	}

	.nav-horizontal ul ul {
		display: none;
		position: absolute;
	}

	.nav-horizontal li.open > ul {
		display: block;
	}
}