@import "variables.less";

html {
	min-height: 100%;
}

body {
	height: 100%;
	/* The html and body elements cannot have any padding or margin. */
	margin: 0px;
	padding: 0px !important;
}

html,
body {
	overflow-x: hidden; /* Prevent scroll on narrow devices */
}

.offcanvas-main-section-overlay {
	display: none;
	cursor: pointer;
	opacity: 0.5;
}

.sidebar-padding {
	padding: 12px 14px;
}

.offcanvas .sidebar {
	.sidebar-menu > li > a,
	.dropdown-menu > li > a {
		.sidebar-padding;
		display: block;
		whitespace: nowrap;
		transition: 0.2s;
		text-decoration: none !important;
	}

	.dropdown-menu {
		padding: 0px;
		font-size: inherit;
	}

	.dropdown-menu > li > a {
		padding-left: 28px;
	}

	.divider {
	    height: 1px;
	    overflow: hidden;
	    background-color: @navbar-default-border;
		width: 100%;
		margin: 0px;
	}

	.badge {
		right: 15px !important;
		top: 11px !important;
	}
}

.offcanvas .sidebar .sidebar-menu > li > a&,
.offcanvas .sidebar .dropdown-menu > li > a& {
	&:hover,
	&:focus,
	&:active {
		background-color: @btn-bg;
	}
}

.offcanvas-mobile-mixin() {
	.offcanvas {
		transition: 0.25s;
	}

	.offcanvas-main-section-overlay {
		bottom: 0;
		position: fixed;
	}

	.offcanvas-container,
	.offcanvas,
	.offcanvas-main-section {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.offcanvas.active-left,
	.offcanvas.active-right {
		position: fixed;
	}

	.offcanvas.active-left .offcanvas-main-section-overlay,
	.offcanvas.active-right .offcanvas-main-section-overlay {
		z-index: 1031;
		display: block;
		bottom: 0;
	}

	.offcanvas.active-left {
		-webkit-transform: translate3d(75%, 0, 0);
		transform: translate3d(75%, 0, 0);
	}

	.offcanvas.active-right {
		-webkit-transform: translate3d(-75%, 0, 0);
		transform: translate3d(-75%, 0, 0);
	}

	.offcanvas .sidebar {
		position: fixed;
		// position: absolute;
		top: 0;
		bottom: 0;
		width: 75%; /* 9 columns */
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 12px;
	}

	.offcanvas .sidebar-right {
		left: 100%;
		border-left: 1px solid @border-color;
	}

	.offcanvas .sidebar-left {
		right: 100%;
		border-right: 1px solid @border-color;
	}

	.offcanvas .sidebar-menu {
		margin-bottom: 0;
	}
}