//
// Off Canvas Mixins
//
@mixin off-canvas($style: false, $main-element: "[role='main']", $complementary-element: "[role='complementary']", $nav-element: "[role='navigation']", $panels: ".page-panel", $main-row: ".row", $nested-rows: ".row", $menu-button: ".menu-button", $sidebar-button: ".sidebar-button", $timing: 0.25s, $main-large-width: 80%, $complementary-large-width: 20%, $panel-count: 5, $use3d: false) {

	padding: 0; 
	margin: 0;

	#{$main-row} { overflow: hidden; }
	#{$main-row} #{$nested-rows} { overflow: visible; }

	#{$main-element}:before { content: " "; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; }

	#{$complementary-element}, #{$main-element} { width: 100%; padding: 0 15px; display: block; position: relative; z-index: 1; -webkit-transition: $timing all ease-in; -moz-transition: $timing all ease-in; -o-transition: $timing all ease-in; transition: $timing all ease-in; }

	@if $use3d {

		#{$complementary-element} { margin-left: -100%; width: $main-large-width; float: left; z-index: 2; }
		#{$main-element} { margin-left: 0; float: right; z-index: 1; position: relative; }

		&.active #{$complementary-element} { 
			-webkit-transform: translate3d(percentage(1 / ($main-large-width/100%)),0,0);
		}
		&.active #{$main-element} { 
			-webkit-transform: translate3d($main-large-width,0,0); 
		}

	} @else {
		
		#{$complementary-element} { margin-left: -100%; width: $main-large-width; float: left; z-index: 2; }
		#{$main-element} { margin-left: 0; float: right; z-index: 1; position: relative; }

		&.active #{$complementary-element} { margin-left: 0; }
		&.active #{$main-element} { margin-right: -$main-large-width; }

	}

	//Global off canvas styles for screens larger than 768px
	@media #{$small} {
		#{$menu-button} , #{$sidebar-button}  { display: none; }
  	#{$complementary-element} { width: $complementary-large-width; margin-left: 0; float: left; padding: 0 15px; }
  	#{$main-element} { width: $main-large-width; padding: 0 15px; }

  	.hide-extras #{$main-element} { width: 100%; }
  	.hide-extras #{$complementary-element} { display: none; }
	}

	//Top Nav Style
	@if $style == nav-on-top {
		#{$nav-element} { -webkit-transition: $timing all ease-in; -moz-transition: $timing all ease-in; -o-transition: $timing all ease-in; transition: $timing all ease-in; }

		#{$nav-element} ul { margin-top: 0; }

		&.active-menu #{$nav-element} { margin-top: 0 !important; }

		@media #{$small} {
			#{$nav-element} { display: none; }
		}
	}

	//Paneled Style
	@else if $style == paneled {

		&> * { overflow: hidden; }
		#{$main-row} { width: 100%; }

		#{$main-element} { padding: 0; background: #fff; width: percentage($panel-count); overflow: hidden; float: none; position: relative; left: 0; -webkit-transition: 0.15s all ease-in; -moz-transition: 0.15s all ease-in; -o-transition: 0.15s all ease-in; transition: 0.15s all ease-in; }

		#{$panels} { width: 100%; padding: 0 15px; -webkit-transition: $timing margin ease-in-out; -moz-transition: $timing margin ease-in-out; -o-transition: $timing margin ease-in-out; transition: $timing margin ease-in-out; background: #fff; min-height: 400px; float: left; margin: 0; width: percentage(1 / $panel-count ); }

		@media #{$small} {
			#{$main-element} { width: 100%; padding: 0; background: #f4f4f4; left: 0 !important; }
  		.page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; }
		}
	}
}



//
// Default CSS Classes
//

body.off-canvas { @include off-canvas($use3d: true); }
body.off-canvas.paneled { @include off-canvas($style: paneled); }
body.off-canvas.nav-on-top { @include off-canvas($style: nav-on-top); }