/* Page Wrapper + Menu */

#page-wrapper {
	@include vendor('transition', 'opacity #{_duration(menu)} ease');
	opacity: 1;
	padding-top: 3em;

	&:before {
		background: rgba(0,0,0,0);
		content: '';
		display: block;
		display: none;
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: _misc(z-index-base) + 1;
	}
}

#menu {
	@include vendor('transform', 'translateX(20em)');
	@include vendor('transition', 'transform #{_duration(menu)} ease');
	-webkit-overflow-scrolling: touch;
	background: _palette(accent1, bg);
	color: _palette(accent1, fg-bold);
	height: 100%;
	max-width: 80%;
	overflow-y: auto;
	padding: 3em 2em;
	position: fixed;
	right: 0;
	top: 0;
	width: 20em;
	z-index: _misc(z-index-base) + 2;

	ul {
		list-style: none;
		padding: 0;

		> li {
			border-top: solid 1px _palette(accent1, border);
			margin: 0.5em 0 0 0;
			padding: 0.5em 0 0 0;

			&:first-child {
				border-top: 0 !important;
				margin-top: 0 !important;
				padding-top: 0 !important;
			}

			> a {
				border: 0;
				color: inherit;
				display: block;
				font-size: 0.8em;
				letter-spacing: _size(letter-spacing-alt);
				outline: 0;
				text-decoration: none;
				text-transform: uppercase;

				@include breakpoint(small) {
					line-height: 3em;
				}
			}
		}
	}

	.close {
		background-image: url('images/close.svg');
		background-position: 4.85em 1em;
		background-repeat: no-repeat;
		border: 0;
		cursor: pointer;
		display: block;
		height: 3em;
		position: absolute;
		right: 0;
		top: 0;
		vertical-align: middle;
		width: 7em;
	}

	@include breakpoint(small) {
		padding: 3em 1.5em;
	}
}

body.is-menu-visible {
	#page-wrapper {
		opacity: 0.35;

		&:before {
			display: block;
		}
	}

	#menu {
		@include vendor('transform', 'translateX(0)');
	}
}