$sidenav-width: 75%;

.sidebar {
	// padding: 1rem;
	overflow-y: auto;
	position: fixed;
	background: $white;
	max-width: 20rem;
	box-shadow: none;
	// visibility: hidden;
	width: $sidenav-width;
	height: 100%;
	top: 0;
	left: -$sidenav-width;
	transition: box-shadow .25s ease-in-out, left .25s ease-in-out;
	z-index: $sidebar-zindex;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	li {
		label {
			margin-top: 0.5rem;
			font-size: 80%;
			letter-spacing: 1px;
		}
		span {
			letter-spacing: 0.5px;
					// font-weight: $global-weight-bold;
		}
	}

	.category {
		font-weight: $global-weight-bold;
		text-transform: uppercase;
		// font-size: 80%;
	}
	li.back {
		font-weight: $global-weight-bold;
	}
	
	> ul:not(.footer-menu) {
		flex: 0 0 auto;
		> li {
			padding: 0.25rem;
			label {
				margin-left: 0.5rem;
			}
			border-bottom: $global-border-secondary;
			&:last-child {
				// border-bottom: none;
				// padding-bottom: 1rem;
			}
			> ul {
				padding: 0;
				> li {
					padding: 0.25rem 0;
					border-bottom: $global-border-secondary;
					&:last-child {
						border: none;
					}
				}

				&.your-account {
					li a, li span {
						font-size: 90%;
						letter-spacing: 1px;
					}
				}
			}
		}
		&:last-child {
			color: $dark-gray;
		}

	}
	.icon {
		padding: 0 !important;
		margin-right: 1rem;
	}

	.button {
		display: block;
	}
	.signout-menu {
		a:not(.button) {
			color: $dark-gray;
		}
	}
	li.sign-in-item {
		padding: 0 $global-padding;
	}
	
	.footer-menu {
		li.menu-text {
			display: flex;
			justify-content: space-between;
			flex-direction: row-reverse;
			// padding: 0.5rem 0.5rem;
			span {
				color: $dark-gray;
			}
			a {
				padding: 0;
				font-weight: $global-weight-normal;
			}
			// color: $dark-gray;
		}
		li {
			border: none;
		}
		> li:first-child {
			border-bottom: $global-border-secondary;
		}
	}
}

.sidebar-overlay {
	position: fixed;
	height: 100%;
	width: 100%;
	background: rgba($primary-color, 0.5);
	z-index: $sidebar-zindex;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s ease-in-out, opacity .25s ease-in-out;
}

.page-container {
	transition: margin .5s ease-in-out;
	width: 100%;
	// margin-left: 0;

	&.sidebar-open {
		// margin-left: $sidenav-width;
		.sidebar {
			left: 0;
			// visibility: visible;
			box-shadow: 2px 0 10px 0 rgba($primary-color, 0.5);
			// transition-delay: 0.25s;
		}
		.sidebar-overlay {
			visibility: visible;
			opacity: 1;
			transition-delay: 0;
		}
	}
}
.sidebar-container {
	position: fixed;
	z-index: $sidebar-zindex;
}

#sulo-store-dashboard {
	.sidebar {
		// padding-top: $navbar-height;
	}
}

@include breakpoint(large) {
	#sulo-store-dashboard {

		$sidebar-width: 15rem;
		.page-content-container {
			display: flex;
			.page-content {
				flex: 1;
				overflow-y: auto;
				padding-left: $sidebar-width;
				transition: padding-left .25s ease-in-out;
			}
		}
		.sidebar-overlay {
			display: none;
		}
		.sidebar-container {
			position: fixed;
			// z-index: 0;
			width: $sidebar-width;
			left: 0;
			transition: left .25s ease-in-out;
			.sidebar {
				left: auto;
				top: $navbar-height;
				// position: absolute;
				width: $sidebar-width;
				height: auto;
				bottom: 0;
				// z-index: 0;
				// margin: 0;
				margin-top: 1px;
				// transition: margin-top .25s ease-in-out;
				background: transparent;
				box-shadow: none;
				
				> ul > li {
					padding-top: 0;
					label {
						padding-top: $global-padding;
					}
				}
				ul ul li {
					transition: background .25s linear;
					a {
						color: $body-font-color;
						font-weight: $global-weight-normal;
					}
					&.is-active {
						background: rgba($light-gray, 0.8);
						a {
							font-weight: $global-weight-bold;
						}
					}
					&:hover {
						background: rgba($light-gray, 0.5);

					}
				}
			
				.signout-menu {
					display: none;
				}
				.footer-menu {
					li:hover {
						background: transparent;
					}
				}
			}
		}
		&.has-subnav {
			.sidebar {
				margin-top: $subnav-height;
			}
		}
		.page-container {
			&.inline-sidebar-hidden {
				.sidebar-container {
					width: 0;
					left: -$sidebar-width;
				}

				.page-content {
					padding-left: 0;
				}
			}
		}
	}
}
