.subnav__nav{
	position:relative;
	display:flex
}
.subnav__nav::after{
	content:"";
	width:1em;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	/*background:linear-gradient(to right,hsla(var(--color-bg-dark-h),var(--color-bg-dark-s),var(--color-bg-dark-l),0),hsla(var(--color-bg-dark-h),var(--color-bg-dark-s),var(--color-bg-dark-l),1));*/
	pointer-events:none
}
.subnav__list{
	display:flex;
	overflow:auto
}
.subnav__item{
	display:inline-block;
	flex-shrink:0
}
.subnav__link{
    display: block;
    font-size: var(--text-sm);
    --bg-o: 0.1;
    backdrop-filter: blur(3px);
    text-decoration: none;
    color: var(--color-contrast-higher);
    border-bottom: 2px solid transparent;
    border-right-width: 0;
    border-left-width: 0;
    transition: .2s;
}
.subnav__link:hover{
	color: var(--color-contrast-higher);
	--bg-o: 0.2;
}
.subnav__link[aria-current=page] {
    --bg-o: 0.2;
    background-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--bg-o, 1));
}

.subnav:not(.subnav--collapsed) .subnav__control,.subnav:not(.subnav--collapsed) .subnav__close-btn{
	display:none
}
.subnav--collapsed{
	display:inline-block
}
.subnav--collapsed .subnav__wrapper{
	position:fixed;
	display:block;
	z-index:var(--z-index-overlay,15);
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),0.9);
	visibility:hidden;
	opacity:0
}
.subnav--collapsed .subnav__wrapper--is-visible{
	visibility:visible;
	opacity:1;
	transition:opacity .3s
}
.subnav--collapsed .subnav__wrapper--is-visible .subnav__nav{
	transform:translateY(0);
	transition:transform .3s
}
.subnav--collapsed .subnav__nav{
	display:block;
	background-color:var(--color-bg);
	box-shadow:var(--shadow-md);
	max-height:100%;
	overflow:auto;
	transform:translateY(-1em)
}
.subnav--collapsed .subnav__nav::after{
	display:none
}
.subnav--collapsed .subnav__list{
	flex-direction:column;
	overflow:visible;
	padding:0 var(--space-md) var(--space-md)
}
.subnav--collapsed .subnav__link{
	border-width:0;
	font-size:var(--text-md);
	padding:var(--space-xs) 0
}
.subnav--collapsed .subnav__link[aria-current=page]{
	color:var(--color-primary)
}
.subnav__close-btn{
	--size:2em;
	width:var(--size);
	height:var(--size);
	display:flex;
	margin:var(--space-xs) var(--space-xs) 0 auto;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	background-color:var(--color-bg-light);
	box-shadow:var(--inner-glow),var(--shadow-sm);
	transition:.2s
}
.subnav__close-btn:hover{
	background-color:var(--color-bg-lighter);
	box-shadow:var(--inner-glow),var(--shadow-md)
}
.subnav__close-btn .icon{
	display:block;
	color:var(--color-contrast-high)
}
[class*=subnav--expanded]::before{
	display:none;
	content:"collapsed"
}
@media(min-width:32rem){
	.subnav--expanded\@xs::before{
		content:"expanded"
	}
}
@media(min-width:48rem){
	.subnav--expanded\@sm::before{
		content:"expanded"
	}
}
@media(min-width:64rem){
	.subnav--expanded\@md::before{
		content:"expanded"
	}
}
@media(min-width:80rem){
	.subnav--expanded\@lg::before{
		content:"expanded"
	}
}
@media(min-width:90rem){
	.subnav--expanded\@xl::before{
		content:"expanded"
	}
}