/* ======================================================
   <!-- Vertical Menu -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';
/*
 * 1. Primary Menu
 * 2. Sub Menu (Using WordPress default class name )
 * 3. Multi-level Sub Menu Position
 * 4. Mega/Dropdown Menu
 * 5. Dropdown Arrow
*/



$vertical-menu-w            : 250px;
$vertical-menu-sub-w        : 200px;
$vertical-menu-font-size    : 0.75rem;
$vertical-menu-top          : 0;
$sel: null;

.uix-v-menu__container:not(.is-mobile) {
	width: $vertical-menu-w;
	background: #F3556D;
	background: linear-gradient(to right, #F3556D 0%,#E22444 100%);
	height: 100%;
	position: fixed;
	top: $vertical-menu-top;
	left: 0;
	z-index: 2;
	box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.1);

	/*
	 ---------------------------
	 1. Primary Menu
	 ---------------------------
	 */
	ul.uix-menu {
		margin: 0;
		padding: 0;


		li {
			@include transition-default();
			position: relative;
			border-bottom: 1px solid rgba(255, 255, 255, 0.13);
			text-align: right;
			padding: 0 1rem;
			font-weight: 600;
			font-size: $vertical-menu-font-size;

			a {
				padding: 1.25rem 0 1.25rem;
				display: block;
				color: #DEDEDE;

				&:hover {
					color: #fff;
				}
			}


			.uix-bubble {
				right: 1rem;
			}

		}


		/*
		 ---------------------------
		 2. Sub Menu (Using WordPress default class name )
		 ---------------------------
		 */
		ul.sub-menu {

			margin: 0;
			padding: 0;
			display: none;
			position: fixed;
			top: $vertical-menu-top;
			min-width: $vertical-menu-sub-w;
			height: 100vh;
			background-color: #E22444;
			border-left: 1px solid rgba(255, 255, 255, 0.13);
			z-index: 3;
			left: #{$vertical-menu-w + $vertical-menu-sub-w*0};


			/*
			 ---------------------------
			 3. Multi-level Sub Menu Position
			 ---------------------------
			 */
			 @for $i from 1 through 10 {
				$sel: if($i == 1, "ul", selector-nest($sel, "ul")) !global;
			
				#{$sel} {
					left: #{$vertical-menu-w + $vertical-menu-sub-w * $i};
				}
			}


		}

		/*
		 ---------------------------
		 4. Mega/Dropdown Menu
		 ---------------------------
		 */
		/* Multi-column */
		li.multi-column {

			.uix-menu__arrow-mega {
				display: none !important;
			}



			span.multi-column-title {
				color: #fff;
				font-weight: 900;
				display: inline-block;
				cursor: default;
				text-align: left;
				opacity: .5;
				font-size: 0.875rem;
				display: block;
				padding: 1rem 1rem 0;

			}

			> ul {
				min-width: inherit;
				white-space: nowrap;
				display: none;
				padding: 0;



				ul {
					display: block;

					li {
						float: none;
						display: block;
						text-align: left;
					}
				}

				li {
					overflow: hidden;
					vertical-align: top;
					padding: 0;

					ul {
						position: relative;
						border-left: none;
						border: none;

					}

					li {
						padding: 0 1rem;
					}

				}


				> li {
					display: inline-block;
					border-left: 1px solid rgba(255, 255, 255, 0.2);
					max-height: 100%;
					overflow-y: auto;
					box-sizing: border-box;

					&::-webkit-scrollbar-track {
						border-radius: 0px;
						background-color: rgba(255,255,255,0);
					}

					&::-webkit-scrollbar {
						width: 1px;
						background-color: rgba(255,255,255,0);
					}

					&::-webkit-scrollbar-thumb {
						border-radius: 0px;
						background-color: rgba(255,255,255,0.4);
					}

					&:first-child {
						border-left: none;
					}

					ul {
						left: 0;
					}


					li {
						border-bottom-color: rgba(255, 255, 255, 0.07);
					}

					.uix-menu__arrow {
						display: none;
					}

				}




			}


		}


	}



	/*
	 ---------------------------
	 5. Dropdown Arrow
	 ---------------------------
	 */
	.uix-menu__arrow {
		display: block;
		position: absolute;
		right: .5rem;
		top: 50%;
		background-color: #fff;
		width: 3px;
		height: 3px;
		border-radius: 100%;
	}


}