@import "@{parenturl}/less/mixins.less";

.min({
	.navbar-toggle { display:none; }
	#header-menu {
		> ul {
			display:inline-grid;
			grid-auto-flow:column;
			li {
				position:relative;
				a {
					display:block;
					text-decoration:none;
					white-space:nowrap;
				}

				.sub-menu {
					box-shadow:2px 2px 4px fade(#393939, 50);
					position:absolute;
					opacity:0;
					pointer-events:none;
					.transition(all, .3s);
					transition-delay:.15s;
					animation: disable-pointer-events .3s;
					
					.menu-item-has-children {
						display:grid;
						grid-gap:0 .5em;
						grid-template-columns:1fr auto auto;
						> figure {
							width:.75em;
							height:1.5em;
							background-color:currentcolor;
							grid-column:2;
							grid-row:1;
							align-self:center;
							.clip("0 100%, 0 80%, 60% 50%, 0 20%, 0 0, 100% 50%");
						}
						> a {
							grid-column:1;
							grid-row:1;
						}
						&:after {
							content:' ';
							display:block;
							grid-column:3;
							grid-row:1;
						}
					}
				}

				@keyframes disable-pointer-events {
					00%, 99% { pointer-events: auto; }
					100% { pointer-events:none; }
				}
				&:hover > .sub-menu {
					opacity:1;
					pointer-events:auto;
					animation: none;
					.transition(all, .3s);
					transition-delay:none;
				}

			}
			> li > .sub-menu {
				top:100%;
				min-width:100%;
				&.overflow-right {
					right:0;
				}
				&.overflow-left {
					left:0;
				}
				> li > .sub-menu {
					top:0;
					&:not(.overflow-right) {
						left:100%;
					}
					&.overflow-right {
						right:100%;
					}
					&.overflow-left {
						left:100%;
					}
				}
			}
			
			.menu-item-has-children {
				input[type=checkbox] { display: none; }
			}

			> li {
				> figure { display: none; }
				&.menu-item-has-children > a { padding-right: 1em; }
			}
		}
	}
});

#header-menu {
	a {
		display: block;
		padding:.5em 1em;
		.inherit();
	}
}

.max({
	#header-menu {
		display: grid;
		input.navbar-toggle {
			grid-row: 1;
			grid-column: 1;
			width: 100%;
			height: 100%;
			z-index: 1;
			opacity: 0;
		}
		figure.navbar-toggle {
			grid-row: 1;
			grid-column: 1;
			text-align: center;
			font-size: 24px;
		}

		> ul { display: none; }
		
		li {
			position:relative;
		}

		.navbar-toggle:checked {
			~ ul {
				display: block;
			}
		}

		.menu-item-has-children {
			display:grid;
			grid-gap:0 .5em;
			grid-template-columns:1fr auto auto;
			> a {
				grid-column:1;
				grid-row:1;
			}
			figure {
				width:1.5em;
				height:.75em;
				background-color:currentcolor;
				grid-column:2;
				grid-row:1;
				align-self:center;
				.clip("0 0, 20% 0, 50% 60%, 80% 0, 100% 0, 50% 100%");
			}
			&:after {
				content:' ';
				display:block;
				grid-column:3;
				grid-row:1;
			}
			> .sub-menu {
				grid-column:1 / span 3;
				grid-row:2;
			}

			input[type=checkbox] {
				position: relative;
				z-index: 10;
				width: 100%;
				height: 100%;
				opacity: 0;
				grid-column:1 / span 3;
				grid-row:1;

				&:checked {
					grid-column:2;
					grid-row:1;
					~ figure {
						.rotate(180deg);
					}

					~ .sub-menu {
						display: block;
					}
				}
			}
		}

		.sub-menu {
			display: none;
			a {
				padding-left: 20px;
			}
			.sub-menu {
				a { padding-left: 40px; }
				.sub-menu {
					a { padding-left: 60px; }
				}
			}
		}
	}
});