/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11-jul-2019, 10:34:49
    Author     : Tatiana

web:Jobe
*/


@mixin menuCategoriasDesplegado(){
    #contenedorNav{
		#megaMenuWebStore{
			//border-top:1px solid $primario;
			//margin-top: 15px;
			//Lo que viene ahora lo hemos quitado por que el menú se convertía en un menú vertical en esta resolución y es pronto para ello
			/*@media (max-width:991px){
				top: 0px;
				padding: 0 16px;;
				margin-top: 0;
				margin:0;
				border-top: 0;
				.megamenu {
					border: 1px solid $gris_bordes;
					border-radius: 0 0 4PX 4px;
					-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
					box-shadow: 0 1px 1px rgba(0,0,0,.05);
					border-top: 0;
					max-height: 160px;
					overflow-y: scroll;
					li {
						padding: 4px 12px;
						border-top: 1px solid $secundario;
						display:block;
						width: 100%;

						a.mdi-library-plus {
							font-size:1.2em;

							float:right;
							padding: 0;
							&:before{
								content: "\f375";
							}
							&.collapsed:before{
								content:"\f334";
							}   
						}
						a{
							padding: 3px ;
							color:$grisTexto;
						}
					}
				}
				&.navbar-collapse.collapse{
					display: none !important;
					&.in{
						display: block !important;
					}
				}
			}*/
			@media (max-width:767px){
				top: -7px;
			}

		}

		&.fieldmegamenu-sticky{
			.stt-menu {
				display: none;
			}
			@media(min-width:768px) and (max-width:991px){
				.navbar-toggle{
					top: 0px;
					position: fixed;
					z-index: 123245;
				}
				#megaMenuWebStore{
					top:41px;
					z-index: 1;
					position: fixed;
				}
			}
			.linea_roja_post {
				height: 1px;
				display: block;
				background: red;
				position: fixed;
				width: 100%;
				left: 0;
			}
		}
		@media (max-width:991px) and (min-width:767px){

		}
	}
	
	.main-navigation{
		background: $menuSup_fondo;
		/*border-bottom: 1px solid $gris;
		border-top:1px solid $gris;
		height: 50px;*/
		position: relative;
		width: 100%;
		@media only screen and (min-width: 992px){
			&.fixed{
				position: fixed;
				z-index: 1030;
				top: 61px;
				left: 0px;
				right: 0px;
			}
		}
		@media (max-width: 991px){
			height:auto;
		}

		#fieldmegamenu-main{
			& > ul {
				height: 50px;
				padding: 0 10px;
				text-align: left;
				display: block;
				position: relative;
				clear: both;
				margin: 0;
				& > li{
					display: inline-block;
					font-size: 15px;
					float: left;
					text-align: left;
					//text-transform: uppercase;
					margin-right: 20px;
					position: relative;
					z-index:1;

					a {
						color: $terciario2;
						letter-spacing: 1px;
						padding:0 12px;
						text-transform: capitalize;
						&:hover span.title-text{
							//color:$primarioHover !important;
							padding-bottom: 5px;
							border-bottom: 2px solid $blanco; 
							transition: all 0.3s ease-in-out 0s;
							-webkit-transition: all 0.3s ease-in-out 0s;
							-ms-transition: all 0.3s ease-in-out 0s;
						}

						span.title-text{
							@media (max-width: 1600px){
								display: none;
							}
						}
						span.title-ico {
							display: none;
							@media (max-width: 1600px){
								display: inline-block;
								font-size: 1.5em;
								color: $blanco;
								top: 5px;
							}
						}
						i {
							position: absolute;
							bottom: 2px;
							right: 4px;
						}
						&.mdi{
							padding: 0;
							position: absolute;
							top: 5px;
							right: 5px;
							&.collapsed{
								&:before{
									content: "\F334";
									@media(min-width:992px){
										content: "\f360";
										transform: rotate(135deg);

										position: absolute;
										bottom: 2px;
										right: -14px;
										font-size: 30px;
										line-height: 0;
										color: $terciario2;
									}
									color: $primario;
								}

							}

						}


						@media (max-width: 1600px){
							&:hover span.title-ico{
								color: $primarioHover;
							}
						}


					}


				}

				@media (min-width:992px){
					height: auto;
					display: flex;
					display: -webkit-flex; /* Safari */
					flex-wrap: wrap;
					-webkit-flex-wrap: wrap;
					justify-content: space-around;
					-webkit-justify-content:space-around;
					i.mdi.mdi-plus-box {
						position: absolute;
						right: 5px;
					}
					& > li {
						text-align: center;
						float: none;
						margin: 5px 0;
						display: unset;
						position: relative;
						div.submenu{
							display: none;
						}
						&:hover{
							div.submenu{
								display: block;
								background: $botones_color_hover;
								height: auto !important;
							}

						}

						div.derecha{
							left:auto; 
							right: 0;
						}

						a{
							display: flex;
							align-content: center;
							display: -webkit-flex;
							-webkit-align-content:center;
							font-weight: 500;
							height: 100%;
							align-items: center;
							&.mdi{
								position: absolute;
								top: auto;
								right: 2px;
								bottom: 0;
							}
						}

					}
					.collapse.in{


					}
					.collapse, .collapsing{
						// margin-top:121px;
						position: absolute;

						z-index: 1;
						background: $blanco;
						left: 0;
					}
					div{ 

						ul{
							@include boxShadow( -9px 14px 26px -2px rgba(196,196,196,1));

							> li{
								text-align: left;
								width: auto;
								padding: 0;                                   
								float: none;
								position:relative;
								a.menu-item-title {
									display: block;
									padding: 10px 20px;
									background: $botones_color_hover;
									margin: 2px 0;
									white-space: nowrap;
								}
								ul{
									display:none;
									background: $blanco;
									@include boxShadow(0 1px 1px rgba(0,0,0,.05));
									position: absolute;
								}
								&:hover{
									a.menu-item-title{
										background: $blanco;
									}

									ul{
										display: block;
										top:0px;
										left: 100%;
										li{
											a{
												background: $blanco;
												&:hover{
													background: $botones_color_hover;
												}
											}
										}
									}
									ul.derecha{
										left:auto;
										right:100%;
									}
								}
							}
						}
					}
				}
				@media (min-width:1200px){
					.collapse, .collapsing{
						//   margin-top:81px;
					}
				}
				@media (min-width:1400px){
					flex-wrap: nowrap;
					-webkit-flex-wrap: nowrap;
					.collapse, .collapsing{
						//  margin-top:71px;
					}
					& > li{
						white-space: normal;
						margin-left: 2px;
						margin-top: 0;
						text-align: center;
						display:unset;
						align-items: center;
						-webkit-align-items: center;
						flex-wrap: wrap;
						-webkit-flex-wrap: wrap;

						a{
							white-space: normal;
							letter-spacing: 0.5px;
							&.mdi{
								position: absolute;
								bottom: 0;
								right: 2px;
								top:auto;
							}
						}
					}
				}
				@media (min-width:1768px){
					.collapse, .collapsing{
						//  margin-top:54px;
					}
				}
			}
			.root-item.no-description {
				line-height: 50px;
				padding: 0;
			}
			.root-item {
				float: left;
				cursor: pointer;
				overflow: hidden;
				padding: 10px 0;
				white-space: nowrap;
			}
			.root .root-item.no-description > a .title.title_font:before {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				border-bottom: 2px solid $blanco;
				bottom: 15px;
				left: 0;
				transition: all 0.3s ease-in-out 0s;
				-webkit-transition: all 0.3s ease-in-out 0s;
				-ms-transition: all 0.3s ease-in-out 0s;
			}
		}

		.icon-align-justify {
			color: $blanco;
			font-size: 18px;
		}
	}
}