/**
 * DX MOBILE MENU
 * ============================================================================
 * Basic styling and settings for the mobile menu. Edit to match each theme's
 * design.
 *
 * @version 1.1
 */

/**
 * VARIABLES
 * ============================================================================
 * Setting the menu default variables for easier tweaks.
 */

$menu-animate: 0.3s all ease;

$menu-allow-animation: true;
$menu-breakpoint: $breakpoint-small;

$menu-icon-size: 26px;
$menu-icon-line-height: 1;
$menu-icon-color: #333;
$menu-icon-color-hover: $color-primary;
$menu-icon-background: none;
$menu-icon-border: none;
$menu-icon-padding: 10px 0;

$menu-toggle-color: #666;

$menu-item-weight: bold;
$menu-item-mobile-weight: 500;
$menu-item-spacing: 0px;
$menu-item-color: black;
$menu-item-color-hover: $color-primary;
$menu-item-border-bottom: 1px solid #f0f0f0;
$menu-item-padding: 15px 5px;
$menu-item-mobile-padding: 5px 0;

// Needs higher value for different header heights.
$menu-container-margin-top: rem-calc( 9px );
$menu-container-background: rgba(white, 1);
$menu-container-border-bottom: 1px solid #f0f0f0;
$menu-container-shadow:  0 10px 20px rgba(black, 0.1);

$submenu-background: #fcfcfc;
$submenu-border-top: 1px solid #eaeaea;
$submenu-shadow: none;
$submenu-safe-zone: 16px;
$submenu-first-padding: 15px;
$submenu-sub-padding: 1.35em;
$submenu-li-left-padding: .625rem;

$menu-dropdown-arrow-open: rotate(-90deg);
$menu-dropdown-arrow-closed: rotate(90deg);

$menu-dropdown-arrow-line-height: 1.7;
$menu-dropdown-arrow-size: 20px;


$animate-transition: .6s ease;
$animate-transform: translateX(-20px);
$animate-opacity: 0;
$animate-visibility: hidden;
$animate-height: 0;

$animate-fast-transition: .3s ease-in-out;
$animate-active-transition: .6s ease;
$animate-active-transform: translateX(0);
$animate-active-opacity: 1;
$animate-active-visibility: visible;
$animate-active-height: 9999px;

/**
 * Needs to be used when the mobile menu covers the whole screen while opened
 * and its possible to scroll inside the menu while maitaining the wrapper element's
 * positioning. Keep commented out by default.
 */
body.is-menu-opened {
	// overflow: hidden;
}

/**
 * Primary navigation base styling.
 * ============================================================================
 */
.main-navigation {
	display: inline-block;
	text-align: left;
	border-bottom: 1px solid #E6E6E6;

	.menu-toggle {
		display: inline-block;
		color: $menu-icon-color;
		line-height: $menu-icon-line-height;
		font-size: $menu-icon-size;
		background: $menu-icon-background;
		border: $menu-icon-border;
		padding: $menu-icon-padding;

		@media (max-width: $breakpoint-small) {
			padding-left: 5px;
		}

		&:hover {
			cursor: pointer;
			color: $menu-icon-color-hover;
		}

		&:focus {
			outline: none;
		}

		.hamburger {
			.line {
				width: 30px;
				height: 4px;
				border-radius: 2px;
				background-color: $menu-toggle-color;
				display: block;
				margin: 6px auto;
				transition: $animate-fast-transition;
			}
		}

		&.is-opened {
			.hamburger {
				.line {
					&:nth-child(2) {
						opacity: 0;	
					}

					&:nth-child(1) {
						transform: translateY(10px) rotate(45deg);
					}

					&:nth-child(3) {
						transform: translateY(-10px) rotate(-45deg);
					}
				}
			}
		}
	}

	li {
		display: inline-block;
		margin-right: $menu-item-spacing;
		font-weight: $menu-item-weight;
		padding: $menu-item-padding;

		@media (max-width: $breakpoint-small) {
			padding: $menu-item-mobile-padding;
			font-weight: $menu-item-mobile-weight;
		}

		a {
			color: $menu-item-color;
		}
	}

	/**
	 * Begin the mobile menu styling.
	 */
	@media (max-width: $menu-breakpoint) {

		li {
			border-bottom: $menu-item-border-bottom;
			margin: 0;
			display: block;

			a {
				display: block;
				padding: rem-calc(8px $global-layout-gutter / 2);
			}

			a:hover {
				color: $menu-item-color-hover;
			}

			&:last-of-type {
				border-bottom: none;
			}
		}

		.sub-menu {
			transition: $animate-transition;
			transform: $animate-transform;
			opacity: $animate-opacity;
			visibility: $animate-visibility;
			max-height: $animate-height;
			border-top: $submenu-border-top;
			background: $submenu-background;
		}

		.menu-item.is-extended > .sub-menu {
			transition: $animate-active-transition;
			transform: $animate-active-transform;
			opacity: $animate-active-opacity;
			visibility: $animate-active-visibility;
			max-height: $animate-active-height;
			border-left: 5px solid #eaeaea;
			padding-left: 10px;
		}
	}
}


/**
 * Displaying the mobile menu on click.
 */
@media (max-width: $menu-breakpoint) {
	.menu-primary-container {
		transition: $animate-transition;
		transform: $animate-transform;
		opacity: $animate-opacity;
		visibility: $animate-visibility;
		max-height: $animate-height;
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 1;
		margin-top: $menu-container-margin-top;
		background: $menu-container-background;
		border-bottom: $menu-container-border-bottom;
		box-shadow: $menu-container-shadow;
	}

	.is-extended .menu-primary-container {
		transition: $animate-active-transition;
		transform: $animate-active-transform;
		opacity: $animate-active-opacity;
		visibility: $animate-active-visibility;
		max-height: $animate-active-height;
	}

	.is-extended .menu-primary {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/**
 * Starts the standard desktop menu styling.
 */
@media (min-width: $menu-breakpoint) {
	.menu-primary-container {
		display: block;
	}

	.main-navigation {
		.menu-toggle {
			display: none;
		}

		.sub-menu,
		.page_item_has_children .children {
			pointer-events: none;
			opacity: 0;
			visibility: hidden;
			transition: 0.2s;
			transform: translateY(40px);
		}

		// Simply show the dropdown menu on hover
		.menu-item-has-children:hover > .sub-menu,
		.page_item_has_children:hover > .children {
			display: block;
		}

		li {
			position: relative;
		}

		li:hover > .sub-menu,
		li.page_item_has_children:hover > .children {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transition: 0.2s;
			transform: translateY(0);
		}

		// WP Generated Menu
		//.page_item {
		//	.page_item_has_children .children {
		//		display: none;
		//		pointer-events: none;
		//		opacity: 0;
		//		visibility: hidden;
		//		transition: 0.2s;
		//		transform: translateY(40px);


		//		&:first-child {
		//			a {
		//				padding-left: 1.35em;
		//			}
		//		}
		//	}

		//	&:hover {
		//		.page_item_has_children .children {
		//			display: block;
		//		}
		//	}
		//}
	}

	.menu-item:nth-last-child(-n+3) .sub-menu {
		right: 0;
		//left: auto;

		.sub-menu {
			right: 100%;
		}
	}

	.sub-menu,
	.page_item_has_children .children {
		position: absolute;
		border: 1px solid #ccc;
		top: calc(100% + #{$submenu-safe-zone - 2} );
		background: rgba(white, 0.98);
		min-width: 200px;
		text-align: left;
		z-index: 99;

		.menu-item,
		.page_item {
			position: relative;
		}

		// Used for easier hover movement.
		&:before {
			position: absolute;
			bottom: 100%;
			width: 100%;
			height: $submenu-safe-zone;
			background: transparent;
			content: '';
			display: block;
		}

		.sub-menu,
		.page_item_has_children .children {
			top: 0;
			left: 100%;
			margin-top: -1px; // Set it equalized
		}

		a {
			display: block;
			padding: 8px 13px;
			font-weight: normal;
			color: black;

			&:hover {
				background: transparent;
				color: $color-primary;
			}
		}

		li {
			width: 100%;
			border-bottom: 1px solid #f0f0f0;
			float: none;
			display: block;
		}
	}
}

/*
* We don't want the first element sub-menu to be aligned all the way to the left
* We also don't want to put any !important tags as well :)
*/
.site-header {
	.sub-menu {
		.menu-item {
			&:first-of-type {
				a {
					padding-left: $submenu-first-padding;

					@media(max-width: $breakpoint-small) {
						padding-left: $submenu-li-left-padding;
					}
				}
			}
		}
	}

	// Submenu of menu should not be affected
	.menu-item {
		.sub-menu {
			.menu-item {
				&:first-of-type {
					a {
						padding-left: $submenu-sub-padding;

						@media(max-width: $breakpoint-small) {
							padding-left: $submenu-li-left-padding;
						}
					}
				}
			}
		}
	}


	// WP Default menu submenus
	.page_item_has_children .children {
		.page_item {
			&:first-of-type {
				a {
					//padding-left: $submenu-first-padding;

					@media(max-width: $breakpoint-small) {
						padding-left: $submenu-li-left-padding;
					}
				}
			}
		}
	}

	// Submenu of default menu should not be affected
	.page_item {
		.page_item_has_children .children {
			.page_item {
				&:first-of-type {
					a {
						//padding-left: $submenu-sub-padding;

						@media(max-width: $breakpoint-small) {
							padding-left: $submenu-li-left-padding;
						}
					}
				}
			}
		}
	}
}

/**
 * Styling the dropdown-arrow element. It takes more properties
 * so its in separate module here in the file.
 */
.menu-item-has-children,
.page_item_has_children {
	position: relative;

	.dropdown-arrow {
		height: rem-calc( 10px + 16px * 2 );
		width: rem-calc( 10px + 16px * 2 );

		font-family: FontAwesome;
		display: inline-block;
		position: absolute;
		top: 10px;
		right: 0;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;

		padding: 4px;
		line-height: $menu-dropdown-arrow-line-height;
		font-size: $menu-dropdown-arrow-size;
		transform: $menu-dropdown-arrow-closed;
		transition: $menu-animate;

		// Disable select while clicking

		&,
		& i {
			user-select: none;
		}
	}

	&.is-extended {
		padding-bottom: 0;

		& > .dropdown-arrow {
			transform: $menu-dropdown-arrow-open;
		}
	}

	@media (min-width: $menu-breakpoint) {
		.dropdown-arrow {
			display: none;
		}
	}
}