$sidebar-width: em(200);
$sidebar-partial-width: em(51);
$sidebar-background-color: $grey-400;

$auxbar-width: em(204);
$auxbar-expanded-width: $auxbar-width * 2.5;
$auxbar-background-color: $grey-400;
.lui-oc-outer-wrap {
	height: 100%;

	.lui-oc-sidebar {
		width: 0;
		height: 100%;
		position: fixed;
		margin-left: 0;
		float: left;
		background: $sidebar-background-color;
		z-index: 1;
		overflow: hidden;
		height: 100%;
	}

	.lui-oc-main {
		// position: absolute;
		width: 100%;
		height: 100%;
		float: left;
		padding-left: 0;
		z-index: 0;
		overflow-x: hidden;
		position: relative;

		header.navigation {
			padding-left: $sidebar-partial-width;
		}

		.navigation-tray {
			padding-right: $sidebar-partial-width;
		}
	}

	.lui-oc-auxbar {
		width: $auxbar-width;
		height: 100%;
		position: fixed;
		right: 0;
		// margin-right: -200%;
		float: left;
		background: $auxbar-background-color;
		border-left: 1px solid $grey-500;
		z-index: 1;
	}
}

// Open Just left

@mixin open-left() {
	.lui-oc-sidebar {
		width: $sidebar-width;
		margin-left: 0;
	}

	.lui-oc-main {
		padding-left: $sidebar-width;

		header.navigation {
			padding-left: $sidebar-width;
		}

		.navigation-tray {
			padding-right: $sidebar-width;
		}
	}
}

@mixin open-right() {

	.lui-oc-main {
		padding-right: $auxbar-width;

		header.navigation {
			padding-right: $auxbar-width;
		}

		.navigation-tray {
			padding-right: $auxbar-width + $sidebar-partial-width;
		}
	}

	.lui-oc-auxbar {
		margin-right: 0;
	}
}

@mixin open-both() {
	.lui-oc-sidebar {
		margin-left: 0;
		width: $sidebar-width;
	}

	.lui-oc-main {
		padding-left: $sidebar-width;
		padding-right: $auxbar-width;

		* {
			padding-left: $sidebar-width;
			padding-right: $auxbar-width;
		}

		// .navigation-tray {
		// 	padding-right: $sidebar-width + $auxbar-width;
		// }
	}

	.lui-oc-auxbar {
		margin-right: 0;
	}
}

@mixin expanded() {

	.lui-oc-main {
		padding-right: $auxbar-expanded-width;

		header.navigation {
			padding-right: $auxbar-expanded-width;
		}

		.navigation-tray {
			padding-right: $auxbar-expanded-width + $sidebar-width;
		}
	}

	.lui-oc-sidebar {
		width: $sidebar-width;
	}

	.lui-oc-auxbar {
		margin-right: 0;
		width: $auxbar-expanded-width;
	}
}

@mixin partially-expanded() {

	.lui-oc-main {
		padding-right: $auxbar-expanded-width;

		header.navigation {
			padding-right: $auxbar-expanded-width;
		}

		.navigation-tray {
			padding-right: $auxbar-expanded-width + $sidebar-partial-width;
		}
	}

	.lui-oc-auxbar {
		margin-right: 0;
		width: $auxbar-expanded-width;
	}
}

.lui-oc-outer-wrap {

	&.lui-open-left {
		@include open-left();
	}
	&.lui-open-right {
		@include open-right();
	}
	&.lui-open-both {
		@include open-both();
	}
	&.lui-expanded {
		@include expanded();
	}
	&.lui-partially-expanded {
		@include partially-expanded();
	}

}

// .lui-oc-sidebar,
// .lui-oc-main,
// .lui-oc-auxbar {
// 	transition: .2s all ease;
// }

// Show None



// @include media($screen-sm) {
// 	@include open-left();

// }

// // Open just right
// @include media($screen-md) {
// 	@include open-right();
// }


// // Open Both Sides

// @include media($screen-lg) {
// 	@include open-both();
// 	@include expanded();
// }