.shifter {
		&-open {
			overflow: hidden;
		}

		&-open &-page *,
		&-open &-header * {
			pointer-events: none;
		}

		// default

		&-navigation {
			display: none;
			opacity: 0;
		}

		&-handle {
			display: none;
		}

		// enabled

		&-enabled &-page {
			min-height: 100%;

			position: relative;
			z-index: 1;

			background: @shifter-page-background;
			box-shadow: @shifter-page-box-shadow-blur 0 @shifter-page-box-shadow-blur @shifter-page-box-shadow-color;
			display: block;
			overflow: hidden;
		}

		&-enabled&-left &-page {
			box-shadow: -(@shifter-page-box-shadow-blur) 0 @shifter-page-box-shadow-blur @shifter-page-box-shadow-color;
		}

		&-enabled &-navigation {
			width: @shifter-nav-width;
			height: 100%;

			position: fixed;
			top: 0;
			z-index: 0;

			background: @shifter-nav-background;
			display: block;
			// opacity: 1;
			overflow: auto;
			pointer-events: none;
			transition:
				opacity 0.001s linear @shifter-transition-speed, // delay when closing
				transform @shifter-transition-speed @shifter-transition-timing;
		}

		&-enabled &-page,
		&-enabled &-header,
		&-enabled &-navigation {
			backface-visibility: hidden;
		}

		&-enabled &-page,
		&-enabled &-header {
			transform: translate3D(0, 0, 0);
			transition: transform @shifter-transition-speed @shifter-transition-timing;
		}

		&-enabled &-handle {
			width: @shifter-handle-width;
			height: @shifter-handle-height;

			position: relative;

			background: @shifter-handle-background;
			cursor: pointer;
			display: block;
			overflow: hidden;
			text-indent: 200%;
			white-space: nowrap;
			user-select: none;

			&:after {
				height: @shifter-icon-height;
				width: @shifter-icon-width;

				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				background: @shifter-icon-color;
				box-shadow:
					0  (@shifter-icon-height + 2) 0 @shifter-icon-color,
					0 -(@shifter-icon-height + 2) 0 @shifter-icon-color;
				content: '';
				display: block;
				margin: auto;
			}
		}

		// right (default)

		&-enabled &-navigation {
			right: 0;

			transform: translate3D(0, 0, 0);
		}

		&-open &-page,
		&-open &-header {
			transform: translate3D(-(@shifter-nav-width), 0, 0);
		}

		// left

		&-enabled&-left &-navigation {
			left: 0;

			transform: translate3D(0, 0, 0);
		}

		&-enabled&-left&-open &-page,
		&-enabled&-left&-open &-header {
			transform: translate3D(@shifter-nav-width, 0, 0);
		}

		// open
		&-open &-navigation {
			opacity: 1;
			pointer-events: all;
			transform: translate3D(0, 0, 0);
			transition:
				opacity 0.001s linear 0s, // no delay when opening
				transform @shifter-transition-speed @shifter-transition-timing;
		}


		// IE8 / 9 - no 3d transforms

		.no-csstransforms3d &-enabled&-navigation {
			right: -@shifter-nav-width;
		}

		// left

		.no-csstransforms3d &-enabled&-left &-navigation {
			left: -@shifter-nav-width;
		}

		// open

		.no-csstransforms3d &-enabled&-open &-page {
			left: -@shifter-nav-width;
		}

		.no-csstransforms3d &-enabled&-open &-navigation {
			right: 0;
		}

		// open left

		.no-csstransforms3d &-enabled&-left&-open &-page {
			left: auto;
			right: -@shifter-nav-width;
		}

		.no-csstransforms3d &-enabled&-left&-open &-navigation {
			left: 0;
		}

	}