$menuWidth: 200px;
a.menu-close,
a.menu-toggle {
	display: none;
	font-size: rem-calc(14);
	position: absolute;
	right: ($small-space * 3);
	top: ($small-space * 2);
	color: $body-font-color;
	outline: none;
	&:hover, &:focus {
		color: darken($body-font-color, 15%);
	}
	@media #{$small-only}{
		display: inline-block;
	}
}
.main-menu {
	position: absolute;
	right: -$menuWidth;
	left: auto;
	width: $menuWidth;
	top: 0;
	height: 100vh;
	transition: right .3s ease;
	z-index: 999;
	@supports (position: fixed) {
		position: fixed;
		&:target + .menuBg,
		&[aria-expanded=true] + .menuBg {
			position: fixed;
		}
	}
	ul {
		list-style: none;
		margin: 0;
		padding: $large-space 0 0;
		min-height: 100%;
		width: $menuWidth;
		background: #ffffff;
		height: 100vh;
		li {
			display: block;
			padding-bottom: 0;
			a {
				display: block;
				padding: ($small-space * 2) ($small-space * 3);
				font-size: rem-calc(14);
				color: $body-font-color;
				text-decoration: none;
			}
			.sub-menu {
				padding-top: 0;
				li {
					// hide description
					p {
						display: none;
					}
				}
			}
		}
	}
	&:target,
	&[aria-expanded=true] {
		right: 0;
		outline: none;
	}
	&:target .menu-close,
	&[aria-expanded=true] .menu-close {
		z-index: 1001;
	}
	&:target ul,
	&[aria-expanded=true] ul {
		position: relative;
		z-index: 1000;
	}
	&:target + .menuBg,
	&[aria-expanded=true] + .menuBg {
		position: absolute;
		display: block;
		content: "";
		right: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 998;
		background: rgba(#000, 0.3);
		cursor: default;
	}
}