/**
 * CONTENTS
 *
 * CORE
 * Drawer Menu..........(()).
 * FOLD
 *
 */

// Drawer Menu (dwm)

// Basics of Off Canvas
$drawer-half-gutter:                ($grid-gutter-width / 2);
// Colors
$drawer-bg:                         $white;
$drawer-color:                      $body-color;
$drawer-border-color:               darken($drawer-bg, 10%);
$drawer-link-color:                 $link-color;
$drawer-link-hover-color:           darken($drawer-link-color, 15%);

$drawer-base-padding:               $margin-x-narrow;
$zindex-drawer:                     $logo-zIndex + 5;

$drawer-body-padding:               $drawer-base-padding $drawer-base-padding $drawer-base-padding $drawer-half-gutter;

// Off Canvas nav styles
$drawer-nav-border-radius:          $nav-pills-border-radius;
$drawer-nav-padding:                $drawer-base-padding $drawer-base-padding $drawer-base-padding 0;

$drawer-nav-link-padding:           $drawer-base-padding $drawer-half-gutter;
$drawer-nav-link-color:             #777;
$drawer-nav-link-hover-color:       darken($drawer-nav-link-color, 15%);
$drawer-nav-link-hover-bg:          lighten($drawer-bg, 15%);

$drawer-nav-padding:                $drawer-base-padding $drawer-half-gutter;
$drawer-navfull-padding:            $drawer-base-padding $drawer-half-gutter;


// Inverse Off Canvas
// TODO colors
$drawer-inverse-bg:                 #333;
$drawer-inverse-color:              $main-color-gray-100;
$drawer-inverse-border-color:       darken($drawer-inverse-bg, 10%);
$drawer-inverse-link-color:         lighten($link-color, 25%);
$drawer-inverse-link-hover-color:   darken($drawer-inverse-link-color, 15%);

$drawer-inverse-nav-link-color:          #fff;
$drawer-inverse-nav-link-hover-color:    $main-color-gray-100;
$drawer-inverse-nav-link-hover-bg:       darken($drawer-inverse-bg, 10%);

//
// Off-Canvas
// --------------------------------------------------

/*
html {
	min-height: 100%;
	height: 100%;
}

body.has-drawer {
	min-height: 100%;
	height: 100%;
}

.has-inner-drawer {
	position: relative;
	overflow: hidden;
}
*/

// Base class
// --------------------------------------------------


@media screen and (min-width: 768px){
	.drawer-controls,
	.drawer-heading,
	.drawer-body,
	.drawer-footer {
		display: none;
	}
}


@media screen and (max-width: 767px) {
	.drawer {
		display: block;
		background-color: $drawer-bg;
		color: $drawer-color;

		border-right: 1px solid $drawer-border-color;
		min-height: 1px;
		height: 100%;
		top: 0;
		left: 0;
		position: fixed;
		z-index: $zindex-drawer;

		-webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05);
		box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05);

		&-contents, &-heading, &-body, &-nav, &-footer, ul, li {
			display: inherit;
			margin: 0;
			width: 100%;
			position: relative;
		}

		width: 95%;
		&.fold {
			margin-left: -95%;
		}

		.navbar-nav {
			display: flex;
			flex-direction: column;
		}

		.navbar-nav > .megamenu {
			order: 9;
		}
	}

	.drawer-heading {
		padding: $drawer-body-padding;

		margin-bottom: $margin-y-narrow;

		font-size: $font-size-base;

		.fa {
			margin-right: $margin-x-narrow;
			color: $body-color;
		}
	}

	.drawer-inverse {
		background-color: $drawer-inverse-bg;
		color: $drawer-inverse-color;
		border-right: 1px solid $drawer-inverse-border-color;
	}

	.drawer-contents {
		background-color: $drawer-bg;
		height: 100%;
		width: 100%;
		overflow: auto;

		padding: $drawer-body-padding;
	}

	// OFF CANVAS CONTENT STYLES
	.drawer-title {
		margin-top: 0;
		margin-bottom: 0;
	}

	.drawer-inner-toggle {
		position: absolute;
		top: $drawer-base-padding;
		right: $drawer-base-padding;
	}

	.drawer-body, .drawer-nav {
		padding: $drawer-body-padding;
	}

	.drawer-nav, .drawer-fullnav {
		padding: $drawer-nav-padding;
		margin-bottom: 0;
		list-style: none;
	}

	.drawer-nav li, .drawer-fullnav li {
		position: relative;
		margin-bottom: 5px;

		a {
			color: $drawer-nav-link-color;
			border-radius: $drawer-nav-border-radius;
			position: relative;
			display: block;
			padding: $drawer-nav-link-padding;
		}

		&.active a, a:hover, a:focus {
			color: $drawer-nav-link-hover-color;
			text-decoration: none;
			background-color: $drawer-nav-link-hover-bg;
		}
	}

	.drawer-fullnav {
		color: $drawer-inverse-nav-link-color;
		padding: 0;

		li {
			margin-bottom: 0;

			a {
				border-radius: 0;
			}
		}
	}

	.drawer-inverse {
		.drawer-contents {
			background-color: $drawer-inverse-bg;
		}

		.drawer-fullnav li a, .drawer-nav li a {
			color: $drawer-inverse-nav-link-color;
			padding: $drawer-navfull-padding;
		}

		.drawer-fullnav li.active a, .drawer-fullnav li a:hover, .drawer-fullnav li a:active,
		.drawer-nav li.active a, .drawer-nav li a:hover, .drawer-nav li a:active {
			color: $drawer-inverse-nav-link-hover-color;
			background-color: $drawer-inverse-nav-link-hover-bg;
		}
	}

	/*----
     #FOLD
     */

	.fold {
		margin-right: 0;
	}

	.folding {
		height: 100%;

		-webkit-transition-property: margin-left;
		transition-property: margin-left;
		-webkit-transition-duration: 0.35s;
		transition-duration: 0.35s;
		-webkit-transition-timing-function: ease;
		transition-timing-function: ease;
	}

	.drawer-right {
		&.fold {
			margin-left: 0;
		}

		&.folding {
			-webkit-transition-property: margin-right;
			transition-property: margin-right;
		}
	}

	.fold.show,
	.drawer-right.fold.show {
		margin-left: 0;
		margin-right: 0;
	}
}