#mobile-container{
	display: none;
	padding: 10px 30px 30px;

	.components{
		float: none;
		line-height: 50px;
		margin-top: 20px;
		margin-bottom: 10px;
		display: flex;
		border-bottom: $base-border-in-white;

		li{
			display: inline-block;
			float: none;
			flex-grow: 1;

			a{
				width: 100%;

				&:hover{
					color: #fff;
				}

				> span{
					right: calc(50% - 15px);
				}
			}
		}

		.comp-sub-menu{
			background: #333333;

			li{
				display: block;
			}
		}
	}
}

#mobile-menu{
	margin-bottom: 20px;
	position: relative;
	padding-top: 15px;

	.hide-mega-headings{
		>a{
			display: none;

			+ul{
				display: block;
			}
		}
	}

	&.hide-menu-icons{
		a span.fa{
			display: none;
		}
	}

	.menu > li{
		border-bottom: 1px solid rgba(0,0,0,0.05);

		.dark-skin &{
			border-color: rgba(255,255,255,0.05);
		}

		li {
			padding-left: 15px;
		}

		&:only-child{
			border-bottom: none;

			// what was the use of this code?
			//> a,
			//> span{
				//display: none;
			//}

			li{
				padding: 0;

				a{
					font-size: 16px;
					font-weight: 600;
				}
			}
		}
	}

	li{
		display: block;
		position: relative;

		.screen-reader-text{
			height: auto;
			width: auto;
			position: initial !important;
			overflow: initial !important;
			clip: initial !important;
		}

		a{
			display: block;
			padding: 15px 50px 15px 0;
			@include font-size(16px);
			line-height: 22px;
			font-weight: 600;

			.dark-skin &{
				color: #ffffff;
			}

			&:hover{
				opacity: 0.7;
			}

			> .fa{
				margin-right: 3px;
				width: 25px;
				text-align: center;
			}
		}

		&.menu-item-has-children > a:before{
			display: none;
		}

		ul,
		.menu-sub-content{
			opacity: 1 !important;
			background-image: none !important;
			padding: 0 !important;
			min-height: unset !important;
		}

		ul{
			padding-left: 15px;
			display: none;

			a{
				font-weight: normal;
				@include font-size(14px);
				padding-top: 10px;
				padding-bottom: 10px;
			}

			.mobile-arrows{
				@include font-size(12px);
			}
		}
	}

	&:not(.hide-menu-icons) li.menu-item-has-icon{
		> ul,
		> div{
			padding-left: 25px !important;
		}
	}

	.mobile-arrows{
		width: 50px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		padding: 15px 10px;
		line-height: 22px;
		cursor: pointer;
		text-align: center;
		@include font-size(14px);
		transform: rotate(0deg);
		transition: transform 0.3s;

		.dark-skin &{
			color: #ffffff;
		}

		&.is-open{
			transform: rotate(180deg);
		}
	}
}

#mobile-social-icons{
	margin-bottom: 15px;

	ul{
		text-align: center;
		overflow: hidden;

		.social-icons-item{
			float: none;
			display: inline-block;
		}
	}

	.social-icons-item{
		margin: 0;

		.social-link {
	    background: transparent;
	    border: none;
	   }
	}

	.light-skin & .social-link:not(:hover) span{
		color: #777 !important;
	}
}

#mobile-search{
	.search-field{
		background-color: rgba(0, 0, 0, 0.05);
		border-color: rgba(255,255,255,0.1);
		color: #ffffff;

		.light-skin &{
			background-color: rgba(0, 0, 0, 0.05);
			color: $base-color;
		}

		// Disable Zoom on iOS devices
		@media screen and (-webkit-min-device-pixel-ratio:0){
			font-size: 16px;
		}
	}

	input{
		@include placeholder{
			color: rgba(255,255,255,0.6);
		}
	}
}

// Nav Icon
#mobile-menu-icon{
	display: none;
	z-index: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
	transition: 0.3s;

	.nav-icon{
		display: inline-block;
		width: 22px;
		height: 2px;
		background-color: $base-color;
		position: relative;
		top: -4px;
		transition:  background 0.4s ease;

		&:before,
		&:after{
			position: absolute;
			right: 0;
			background-color: $base-color;
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			transition: transform 0.4s, background 0.4s, right .2s ease;
			transform: translateZ(0);
			backface-visibility: hidden;
		}

		&:before{
			transform: translateY(-6px);
		}

		&:after{
			transform: translateY(6px);
		}

		.dark-skin &,
		.main-nav-dark.header-layout-1 &{
			&,
			&:before,
			&:after{
				background-color: #ffffff;
			}

			.menu-text{
				color: #ffffff;
			}
		}
	}

	.menu-text{
		color: $base-color;
		line-height: 30px;
		@include font-size(12px);
		padding: 0 3px;
		display: inline-block;
		transition: color 0.4s;

		.dark-skin &,
		.main-nav-dark.header-layout-1 &{
			color: #ffffff;
		}
	}

	// &:hover{
	// 	color: inherit;
	// 	opacity: 0.85;

	// 	.nav-icon{
	// 		background-color: $brand-color;

	// 		&:before,
	// 		&:after{
	// 			right: 0;
	// 			background-color: $brand-color;
	// 		}
	// 	}
	// 	.menu-text{
	// 		color: $brand-color;
	// 		opacity: 0.85;
	// 	}
	// }
}

@include breakpoint(max_min_md){
	#mobile-container,
	#mobile-menu-icon{
		display: block;
	}

	#slide-sidebar-widgets{
		display: none;
	}
}