$layout-drawer-width: 200px;

.navigation-drawer {
	height: 100%;
	width: $layout-drawer-width;
	position: fixed;

	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr auto;

	transform: translateX(-$layout-drawer-width - 10px);
	transform-style: preserve-3d;
	will-change: transform;

	@include material-animation-default();
	transition-property: transform;

	background: $bg-1-color;
	border-right: $border-width solid $border-color;
	//@include shadow-2dp();
	z-index: $zindex-max;

	&.active {
		transform: translateX(0);
	}

	.navigation-drawer-header {
		padding: $control-padding;
		//	border-bottom: $border-width solid $border-color;
	}

	.navigation-drawer-content {
		overflow-y: auto;
		padding: $control-padding / 2;
	}

	.navigation-drawer-footer {
		padding: $control-padding;
	}

	.navigation-drawer-item {
		width: 100%;
		height: 50px;
		color: $font-color;
		text-decoration: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		padding: $control-padding;
		border-radius: $border-radius;


		.navigation-drawer-item-icon {
			padding-right: 1rem;
		}


		&.navigation-drawer-item-disabled {
			opacity: .3;
			pointer-events: none;
		}

		&.active, &:hover {
			background: rgba($primary-color, .2);;
			color: $primary-color;
		}
	}
}

.navigation-drawer-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba($bg-color, .75);
	z-index: $zindex-9;
}