@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;
		display: inline-block;
		transition: color .2s;
	}

	:is(nav, [role="navigation"]) a:hover{
		color: hsl(var(--clr-teal))
	}

	.nav-utility{
		font-size: .8rem;
	}

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

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

	.nav-horizontal .sub-menu{
		max-height: 0;
		min-width: 275px;
		overflow: hidden;
		opacity: 0;
		background: white;
		position: absolute;
		left: -2rem;
		top: 3.15rem;
		transition: max-height .4s, opacity .3s;
	}

	.nav-horizontal .sub-menu li{
		padding: 1rem 2rem;
		border-top: 1px solid hsl(var(--clr-cream));
	}

	.nav-horizontal li.has-sub-menu > a:after{
		font-family: FontAwesome;
		content: '\f054';
		font-size: 1rem;
		margin-left: .5rem;
		display: inline-block;
		transition: transform .3s;
	}

	.nav-horizontal li.open > ul{
		max-height: 300px;
		opacity: 1;
	}

	.nav-horizontal li.open > a:after{
		transform: rotate(90deg);
	}
}