@import '../libs/vars';
@import '../libs/functions';
@import '../libs/mixins';

///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Main */

	#main {
		@include vendor('transition', ('opacity #{_duration(layout)} ease', 'right #{_duration(layout)} ease', 'left #{_duration(layout)} ease', 'visibility #{_duration(layout)}'));
		-webkit-overflow-scrolling: touch;
		position: fixed;
		top: 0;
		width: _size(main);
		height: 100%;
		background: _palette(bg);
		outline: 0;
		overflow-x: hidden;
		overflow-y: auto;
		text-align: _misc(main-align);
		visibility: visible;
		z-index: _misc(z-index-base);

		@if _misc(main-side) == 'left' {
			left: 0;
		}
		@else {
			right: 0;
		}

		.toggle {
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			position: absolute;
			top: 0;
			width: 4em;
			height: 4em;
			background-image: url('images/close-small-alt.svg');
			background-repeat: no-repeat;
			background-size: 32px 32px;
			cursor: pointer;
			display: none;
			z-index: 1;

			@if _misc(main-side) == 'left' {
				background-position: calc(100% - 0.5em) 0.5em;
				right: 0;
			}
			@else {
				background-position: 0.5em 0.5em;
				left: 0;
			}
		}

		body.fullscreen & {
			visibility: hidden;

			@if _misc(main-side) == 'left' {
				left: (_size(main) * -1);
			}
			@else {
				right: (_size(main) * -1);
			}
		}

		body.is-loading-1 & {
			opacity: 0;

			@if _misc(main-side) == 'left' {
				left: -2em;
			}
			@else {
				right: -2em;
			}
		}

		@include breakpoint(large) {
			width: _size(main-alt);

			body.fullscreen & {
				@if _misc(main-side) == 'left' {
					left: (_size(main-alt) * -1);
				}
				@else {
					right: (_size(main-alt) * -1);
				}
			}
		}

		@include breakpoint(medium) {
			background: transparentize(_palette(bg), 0.075);

			.toggle {
				display: block;
			}
		}

		@include breakpoint(xsmall) {
			@include vendor('transition', ('opacity #{_duration(layout-alt)} ease', 'visibility #{_duration(layout-alt)}'));
			width: 100%;
			background: _palette(bg);
			text-align: center;

			body.is-loading-1 & {
				left: auto !important;
				right: auto !important;
			}

			body.fullscreen & {
				left: auto !important;
				right: auto !important;
				opacity: 0;
			}

			.toggle {
				display: none;
			}
		}
	}