<div class="wrapper">
	<div class="desc">
		<h1>Responsive horizontal scroll multi-level menu</h1>
		<p>Sooo long tile XD (and unsemantic code too :S)</p>
	</div>

	<div class="content">
		<!-- content here -->
		<nav class="menu">
			<div class="menu__wrapper">
				<ul class="menu__menu">
					<li><a class="menu__item" href="#">Item 1</a></li>
					<li><a class="menu__item" href="#">Item 2</a></li>
					<li data-submenu="submenu1"><label class="menu__item menu__item--active" for="submenu1">Item 3</label></li>
					<li><a class="menu__item" href="#">Item 4</a></li>
					<li><a class="menu__item" href="#">Item 5</a></li>
					<li><a class="menu__item" href="#">Item 6</a></li>
					<li><a class="menu__item" href="#">Item 7</a></li>
					<li><a class="menu__item" href="#">Item 8</a></li>
					<li><a class="menu__item" href="#">Item 9</a></li>
				</ul>
			</div>
			
			<input type="checkbox" id="submenu1" name="submenu1" />
			<div class="menu__wrapper" data-submenu-name="submenu1">
				<ul class="menu__submenu">
					<li><a class="menu__item" href="#">Sub Item 1</a></li>
					<li><a class="menu__item" href="#">Sub Item 2</a></li>
					<li><a class="menu__item" href="#">Sub Item 3</a></li>
					<li><a class="menu__item" href="#">Sub Item 4</a></li>
					<li><a class="menu__item" href="#">Sub Item 5</a></li>
				</ul>
			</div>
		</nav>
	</div>

	<footer>
		<a target="_blank" href="https://twitter.com/ricardpanades">@ricardpanades</a>
	</footer>
</div>

$bgMenu: #263238;
$fontColor: #fff;
$bgItem: #009688;
$fakePadding: 1em;
$scrollBarHide: 1em;
// TODO: Add a little intro animation that "scroll" right to show to the user that there are more content



.menu {
	$sidePadding: 1em;
	
	color: $fontColor;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	
	input[type="checkbox"] { display: none; }
	
	input[type="checkbox"]:checked ~ * { display: block; }
	
	&__wrapper {
		overflow: hidden;
		position: relative;
		top: -$scrollBarHide; // to hide scrollbar
		background: $bgMenu;
		z-index: 2;
		
		&:before,
		&:after {
			content: '';
			position: absolute;
			width: $sidePadding;
			height: 100%;
			top: 0;
			z-index: 3;
		}

		&:before {
			left: 0;
			background: linear-gradient(to right, $bgMenu 5%, rgba(255, 255, 255, 0) 100%);
		}

		&:after {
			right: 0;
			background: linear-gradient(to left, $bgMenu 5%, rgba(255, 255, 255, 0) 100%);
		}
		
		// hide all the submenus
		&[data-submenu-name] {
			display: none;
			background: lighten($bgMenu, 20%);
			z-index: 1;
			margin-top: -$fakePadding;
			
			&:before {
				left: 0;
				background: linear-gradient(to right, lighten($bgMenu, 20%) 5%, rgba(255, 255, 255, 0) 100%);
			}

			&:after {
				right: 0;
				background: linear-gradient(to left, lighten($bgMenu, 20%) 5%, rgba(255, 255, 255, 0) 100%);
			}
		}
		
		&--active {
			display: block;
		}
	}
	
	&__menu,
	&__submenu{
		margin: 0;
		//padding: .675em $sidePadding (.675em * 2) $sidePadding;
		list-style: none;
		overflow-x: scroll;
		position: relative;
		top: $scrollBarHide; // to hide scrollbar
		padding: 0 0 $scrollBarHide 0; // to hide scrollbar
	}
	
	
	li {
		display: inline-block;
		margin: $fakePadding 0 $fakePadding $fakePadding;
		
		&:last-child { margin-right: $fakePadding; }
		
		// if has submenu -> add an arrow down
		&[data-submenu] .menu__item {
			&:after {
				$arrowSize: .375em;
				
				content: '';
				margin-left: 5px;
				top: -.1em;
				position: relative;
				display: inline-block;
				width: 0;
				height: 0;
				border-top: $arrowSize solid $fontColor;
				border-right: $arrowSize solid transparent;
				border-left: $arrowSize solid transparent;
			}
		}
	}
	
	&__item {
		padding: .625em 1.25em;
		background: $bgItem;
		display: inline-block;
		border-radius: 100em;
		color: $fontColor;
		cursor: pointer;
		position: relative;
		
		&:hover {
			text-decoration: none;
		}
		
		&--active {
			&:before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				display: block;
				top: 100%;
				right: 50%;
				margin-right: -1em;
				border-bottom: 1em solid lighten($bgMenu, 20%);;
				border-right: 1em solid transparent;
				border-left: 1em solid transparent;
			}
		}
	}
	
	&__submenu {
	}
}