body.fs-menu-open
{
	overflow: hidden;
}
.fs-menu
{
	--gap: 10px;
	--transition: .36s;
	--separator: light-dark( hsl(0deg 0% calc((10 + var(--base-darkness)) * 1%) / 8.5%), hsl(0deg 0% calc((90 - var(--base-lightness)) * 1%) / 8.5%) );
	background: light-dark(hsl(0deg 0% calc((95 - var(--base-lightness)) * 1%) / 85%) , hsl(0deg 0% calc((5 + var(--base-darkness)) * 1%) / 85%));
	backdrop-filter: blur(10px);
	inset: 0;
	position: fixed;
	z-index: 70;
	
	& > *:is(button[command=close], a.button[rel=close])
	{
		right: 15px;
		position: absolute;
		top: 15px;
		z-index: 3;
	}
	.section
	{
		align-items: center;
		color: var(--color-text);
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		font-size: calc(var(--base-fontsize) * 1.24);
		justify-content: center;
		inset: 0;
		position: absolute;
		z-index: 1;
		
		&, menu
		{
			display: flex;
			flex-flow: column nowrap;
			gap: var(--gap);
		}
		menu
		{
			list-style: none;
			margin: 0;
			padding: 0;
			
			li
			{
				button, a
				{
					background: none;
					border: none;
					border-radius: 5px;
					display: block;
					font-size: calc((18 / 16) * var(--base-fontsize));
					text-align: center;
					transition: background-color .36s, color .36s;
					padding: var(--button-padding);
					width: 100%;
					
					&:hover
					{
						background-color: var(--color-menu-button);
						color: var(--color-menu-button-text);
					}
				}
				
				&:not(:first-child)
				{
					border-top: solid 1px var(--separator);
					padding-top: var(--gap);
				}
			}
		}
	}
	&.transition
	{
		.section.visible
		{
			animation: var(--transition) cubic-bezier(.85, 0,.15,1) forwards;
			pointer-events: none;
			
			&.enter-forward
			{
				animation-name: fs-menu-enter-forward;
			}
			&.leave-forward
			{
				animation-name: fs-menu-leave-forward;
			}
			&.enter-backward
			{
				animation-name: fs-menu-enter-backward;
			}
			&.leave-backward
			{
				animation-name: fs-menu-leave-backward;
			}
		}
	}
}
.fs-menu[data-name=user]
{
	.section
	{
		.user-info
		{
			border-bottom: solid 1px var(--separator);
			display: flex;
			flex-flow: row nowrap;
			gap: 10px;
			padding: var(--button-padding);
			padding-bottom: calc(var(--gap) + 5px);
			
			.icon
			{
				--button-size: calc((var(--base-fontsize) * 1.24 * 1.15) * 2);
				align-items: center;
				background: var(--color-menu-button);
				border-radius: 100%;
				color: var(--color-menu-button-text);
				display: flex;
				font-size: calc(var(--base-fontsize) * 1.24);
				height: var(--button-size);
				justify-content: center;
				padding: var(--button-padding);
				text-align: center;
				width: var(--button-size);
				
				i
				{
					line-height: 1;
				}
			}
			.info
			{
				display: flex;
				flex-flow: column nowrap;
			}
		}
	}
}

.fs-menu:not(.visible),
.fs-menu .section:not(.visible)
{
	display: none;
}

@media screen and (min-width: 768px)
{
	.fs-menu
	{
		backdrop-filter: blur(5px);
	}
}

@keyframes fs-menu-enter-forward
{
	from
	{
		opacity: 0;
		translate: 150px 0;
	}
	to
	{
		opacity: 1;
		translate: 0 0;
	}
}
@keyframes fs-menu-leave-forward
{
	from
	{
		opacity: 1;
		translate: 0 0;
	}
	to
	{
		opacity: 0;
		translate: -150px 0;
	}
}

@keyframes fs-menu-enter-backward
{
	from
	{
		opacity: 0;
		translate: -150px 0;
	}
	to
	{
		opacity: 1;
		translate: 0 0;
	}
}
@keyframes fs-menu-leave-backward
{
	from
	{
		opacity: 1;
		translate: 0 0;
	}
	to
	{
		opacity: 0;
		translate: 150px 0;
	}
}