.js-mobile-menu
	display: none
	float: left
	cursor: pointer
	padding-top: 0
	margin-left: 0.6rem
	margin-right: 0.6rem
	font-size: 1.8rem
	flex-direction: column
	justify-content: center

	+media-breakpoint-down(md)
		display: inline-flex

.nav-bar
	position: fixed
	top: 0
	bottom: 0
	z-index: 502
	background: $gray-dark-menu
	width: $size-navbar-width
	margin-top: $size-header-height
	height: 100%
	overflow-y: auto
	transition: all .5s ease-out

	.material-icons
		color: white
		font-size: 1.188rem
		line-height: inherit

	&.mobile-nav
		margin-left: -100%
		width: 70%
		margin-top: $size-header-height + (.625rem * 2)

		+media-breakpoint-only(sm)
			width: 60%

		+media-breakpoint-only(md)
			width: 40%

		&.expanded
			display: block
			margin-left: 0
			overflow-y: scroll

		.onboarding-navbar
			display: none

		.panel-collapse
			padding-left: 0

			.link-leveltwo .link
				padding-left: 0.75rem

		.employee_avatar
			text-decoration: none
			text-align: center
			padding-top: 1rem

			.material-icons
				line-height: 3.75rem
				font-size: 3.75rem

				+media-breakpoint-down(md)
					line-height: 4.6875rem
					font-size: 4.6875rem

			span
				color: white
				display: block
				margin-bottom: 0.625rem

				+media-breakpoint-down(md)
					font-size: 1.09375rem

			img
				width: 3.75rem
				height: 3.75rem

				&.img-thumbnail
					border-radius: 36px

		.shop-list
			padding-bottom: 1rem
			text-align: center
			font-weight: bold

			a
				+media-breakpoint-down(md)
					font-size: 1.09375rem

		.main-menu
			margin-top: 0.625rem

			& > li:first-child
				padding-bottom: 1rem

		.shop-list-title
			color: $brand-primary
			text-transform: uppercase
			font-size: 1rem
			text-align: center
			margin-bottom: 0.9375rem
			&::after
				font-family: 'Material Icons'
				content: "\E313"
				font-size: 1.25rem
				line-height: 1.375rem
				margin-left: 0.625rem
				vertical-align: bottom

		.items-list
			padding-left: 0
			a:focus
				background-color: transparent

			li
				background-color: white
				border-bottom: $gray-light 1px solid
				&.group a
					padding: 0.9375rem 2.5rem
					font-weight: bold

				&.shop
					padding: 0.9375rem 0.9375rem 0.9375rem 2.5rem
					a
						display: inline-block
						width: auto
						&.link-shop
							float: right
							.material-icons
								font-size: 1.25rem
								color: $gray-medium

			li:first-child a
				color: $brand-primary
				text-transform: uppercase
				font-size: 0.9375rem
				padding: 0.9375rem 1.25rem

.main-menu
	padding: 0 0 5.313rem 0
	margin: 0

	.category-title > .title
		text-transform: uppercase

	.link-levelone
		$padding-size: 1.25rem
		display: block

		&[data-submenu]
			+media-breakpoint-down(md)
				a.link
					font-size: 1.25rem
					padding-top: 1.25rem
					padding-bottom: 1.25rem
					line-height: inherit

					.material-icons
						font-size: 2rem
						line-height: 2rem

						&.sub-tabs-arrow
							padding-right: 1.2rem

			&.has_submenu
				+media-breakpoint-down(md)
					.sub-tabs-arrow
						visibility: visible

		&.-active
			+media-breakpoint-down(md)
				border-right: none

			> .link
				border-left: .25rem solid #25b9d7
				padding-left: .638rem

				.material-icons
					&:first-child
						color: #25b9d7

		&:not(#subtab-AdminParentModulesSf)
			i.material-icons.mi-extension
				color: #6c868e

		> .link
			font-size: .75rem
			display: flex
			height: initial
			line-height: 1rem
			align-items: end
			color: $gray-dark-text
			text-decoration: none
			padding: 0.5rem .3125rem 0.5rem .938rem
			word-break: break-word
			white-space: initial
			text-overflow: initial
			overflow: hidden
			+media-breakpoint-down(md)
				font-size: 1rem

			span
				padding-left: .625rem

			.sub-tabs-arrow
				margin-left: auto
				visibility: hidden
				color: #6c868e
				vertical-align: middle
				line-height: inherit

		&.ul-open,
		&.-active,
		&.-hover
			& > .link
				background: #202226
				color: white
				transition: background 300ms ease

				+media-breakpoint-down(md)
					background: $gray-dark-menu

			&.has_submenu
				.link
					.sub-tabs-arrow
						visibility: visible

		> .submenu
			list-style: none
			background: #202226
			display: none
			white-space: nowrap
			padding-left: 2.75rem

			& > li
				+media-breakpoint-down(md)
					a.link
						padding-top: 0.75rem
						padding-bottom: 0.75rem

				&:first-of-type
					padding-top: .625rem

					+media-breakpoint-down(md)
						padding-top: 0

				&:last-of-type
					padding-bottom: .750rem

					+media-breakpoint-down(md)
						padding-bottom: 0

						a.link
							padding-bottom: 1.5rem

		&.ul-open,
		&.-active
			.link
				background: #202226

		&.open
			> .submenu
				display: block

	.link-leveltwo
		@extend .link-levelone

		&.-active
			> .link
				padding-left: 0
				border-left: none
				color: white

		> .link
			height: initial
			line-height: 0.9rem
			padding: 0.3125rem 0.3rem 0.3125rem 0

			+media-breakpoint-down(md)
				padding-top: 1.4rem
				padding-bottom: 1.4rem
				line-height: 1.6rem

		> .link:hover
			color: $gray-dark-text-hover

.category-title
	display: block
	font-weight: bold
	font-size: 0.75rem
	border-top: 1px solid #bbcdd2
	margin: 1.813rem 0 0 .938rem
	padding: .875rem 0 .750rem 0


	+media-breakpoint-down(md)
		display: none

	& > .title
		color: white
		background: $gray-dark-menu

.menu-collapse
	height: .813rem
	font-size: 2rem
	display: block
	cursor: pointer
	text-align: right
	padding: .688rem .938rem 1.188rem 0
	line-height: .813rem
	color: $gray-dark-text

	+media-breakpoint-down(md)
		display: none
		padding-bottom: 1rem

	.material-icons
		color: #BEBEBE

		&:last-child
			margin-left: -1.313rem

.page-sidebar-closed:not(.mobile)
	.content-div, #content
		transition: padding 1s ease

	.menu-collapse
		transform: rotate(180deg)
		padding-right: .8rem

	.nav-bar
		overflow: visible
		width: $size-navbar-width-mini

		.main-menu
			.category-title > .title,
			.link-levelone span
				display: none

			.sub-tabs-arrow
				display: none !important

			.category-title
				margin-top: 0.8rem
				padding-bottom: 0

			.link-levelone
				position: relative

				.link
					line-height: initial

				&:first-of-type
					margin-bottom: 0

				&.-hover
					> .link
						transition: all 0s ease 0s
						width: 14.6875rem

						> span
							display: inline-block
							padding-left: 1.563rem

					ul.submenu
						position: absolute !important
						display: block !important
						top: 34px !important
						width: 200px !important
						left: 50px
						padding-left: 5px

				.link-leveltwo
					&:first-of-type
						padding-top: 0 !important
						margin-top: .2rem

					&:last-of-type
						padding-bottom: 0 !important
						margin-bottom: 1rem

					.link
						padding-left: 1.5rem

		@media (max-height: 870px)
			// this two tabs need to be flipped, otherwise
			// css issue with bottom of the page
			#subtab-ShopParameters:hover,
			#subtab-AdminAdvancedParameters:hover
				ul.submenu
					display: flex !important
					flex-direction: column-reverse
					top: 0 !important
					transform: rotate(180deg)
					transform-origin: top

					li
						transform: rotate(180deg)

						&:last-of-type
							margin-bottom: 0

.mobile-layer
	display: none
	transition: all 0.2s ease-in-out
	position: fixed
	background: rgba(0,0,0,.7)
	width: 100%
	height: 100%
	z-index: 501
	top: 0
	left: 0

	&.expanded
		display: block