$menu-margin-top:				30px !default
$menu-level-0-font-family:		$headings-font-family !default
$menu-level-0-font-size:		17px !default
$menu-level-0-color:			#575757 !default
$menu-level-0-hover-color:		$theme-color !default
$menu-level-0-active-color:		$menu-level-0-hover-color !default
$menu-level-0-divider-color:	$menu-level-0-hover-color !default

$menu-level-n-font-size:		14px !default
$menu-level-n-background:		#fff !default
$menu-level-n-color:			$menu-level-0-color !default
$menu-level-n-hover-color:		$menu-level-0-hover-color !default
$menu-level-n-active-color:		$menu-level-n-hover-color !default
$menu-level-n-divider-color:	$menu-level-n-hover-color !default

$menu-column-font-size:			16px !default

#amy-site-nav
	display: none

	.amy-float-menu &
		float: right
		margin-top: $menu-margin-top

	.amy-top-bar-right-compact &
		margin-top: ($top-bar-height)

	.amy-middle-logo &
		text-align: center

	.amy-primary-menu-left,
	.amy-primary-menu-right
		margin-top: $menu-margin-top

	.amy-primary-menu-left
		float: left

	.amy-primary-menu-right
		float: right

	// global levels
	ul
		margin: 0
		padding: 0
		list-style-type: none

		li
			text-align: left
			position: relative
			margin: 0

			ul
				display: none
				position: absolute
				z-index: 300
				top: 100%
				width: 250px
				background-color: $menu-level-n-background
				padding: 5px 15px
				@include box-shadow(0 2px 6px 2px rgba(black, 0.07))

				li .amy-link
					font-size: $menu-level-n-font-size
					display: block
					position: relative
					padding: 12px
					color: $menu-level-n-color
					//background-color: #fff
					border-top: 1px dotted $menu-level-n-divider-color
					@include transition(all .3s)

					&:hover
						color: $menu-level-n-hover-color
						text-decoration: none

					> i
						margin-right: 5px

				li:first-child > .amy-link
					border-top: none

				ul
					top: 0
					left: 100%

	// first level
	> ul
		> li
			float: left

			> .amy-link
				font-family: $menu-level-0-font-family
				font-size: $menu-level-0-font-size
				text-transform: none
				font-weight: $font-weight-bold
				color: $menu-level-0-color
				display: block
				position: relative
				padding-left: 20px
				padding-right: 20px
				line-height: $header-height - $menu-margin-top

				.amy-top-bar-right-compact &
					line-height: $header-height - $top-bar-height

				&:hover,
				&:focus
					color: $menu-level-0-hover-color
					text-decoration: none

				// divider
				&:before
					background: $menu-level-0-divider-color
					position: absolute
					content: ""
					right: -1px
					top: ($header-height - $menu-margin-top - 3) / 2
					width: 3px
					height: 3px
					border-radius: 3px

					.amy-top-bar-right-compact &
						top: ($header-height - $top-bar-height - 3) / 2

				> i
					margin-right: 5px

			&:last-child
				> .amy-link
					padding-right: 0

					&:before
						content: none

			&.current-menu-ancestor > .amy-link,
			&.current-menu-item > .amy-link
				color: $menu-level-0-active-color

			> ul
				border-top: 2px solid $menu-level-n-divider-color
				margin-top: -2px
				padding-top: 10px
				padding-bottom: 10px

				> li:first-child > .amy-link
					border-top: none

			&.menu-item-has-children
				> a:after
					bottom: 2px
					left: 49%
					border: solid transparent
					content: ""
					height: 0
					width: 0
					position: absolute
					pointer-events: none
					border-color: transparent
					border-bottom-color: $menu-level-n-divider-color
					border-width: 4px
					margin-left: -4px
					opacity: 0
					visibility: hidden

					@include transition(opacity .3s, visibility .3s)

			&:hover > a:after
					opacity: 1
					visibility: visible

					@include transform(none)

	.amy-menu-cart,
	.amy-menu-search
		&:last-child
			a
				padding-right: 0

	// mega menu levels
	.amy-mega-menu
		position: inherit

		> ul
			width: 100%
			left: 0

			> li
				float: left !important
				padding: 0 !important

				&:last-child
					border: none

					a
						border-right: none !important

				> .amy-link
					border-top: none
					font-weight: $font-weight-bold
					font-size: $menu-column-font-size

				.amy-link
					//border-right: 1px solid #eeeeee

				.amy-title
					font-weight: $font-weight-bold
					text-transform: uppercase
					padding-top: 17px
					padding-bottom: 15px
					border-top: none
					color: #555555
					background-color: #f5f5f5

					&:hover
						color: inherit

					&:after
						display: none

				ul
					clear: both
					display: block !important
					position: relative !important
					left: 0 !important
					opacity: 1 !important
					width: 100% !important
					@include box-shadow(none !important)

	.amy-custom,
	.amy-natural
		position: relative

	.amy-col-2 > ul
		width: 400px

	.amy-col-3 > ul
		width: 525px

	.amy-col-4 > ul
		width: 600px

	.amy-col-5 > ul
		width: 500px

	.amy-col-6 > ul
		width: 600px

	.amy-right > ul
		left: auto !important
		right: 0

	.amy-label
		position: relative
		top: -5px
		left: 3px
		padding: 1px 4px
		font-size: 9px
		text-transform: uppercase

	.amy-column-title
		cursor: inherit

	.amy-content
		display: block
		font-size: 11px
		padding-top: 5px
		@include opacity(0.7)

	.amy-full-content
		margin: 10px

	.current-menu-ancestor > .amy-link,
	.current-menu-item > .amy-link
		color: #428bca

// Mobile menu
#amy-menu-toggle
	display: block
	position: fixed
	top: 30px
	padding: 10px
	left: 40px
	cursor: pointer
	z-index: 10
	width: 50px
	height: 47px
	@include transition(all 0.6s ease 0s)
	background: url("../images/frontend/backgrounds/bg-icon-menu.png") no-repeat center

	&.amy-menu-toggle-open
		left: 270px


	a
		display: block
		position: relative
		margin: 8px auto
		padding: 0px
		font-size: 0
		text-indent: -9999em
		appearance: none
		box-shadow: none
		border-radius: 0
		border: none
		width: 20px
		@include transition(background 0.3s)

		&:focus
			outline: none

		span
			&,
			&:before,
			&:after
				display: block
				width: 100%
				height: 3px
				margin: 2px auto
				background-color: $theme-color
				@include transition(all 0.1s)

			&:before,
			&:after
				position: absolute
				content: ""

			&:before
				margin-top: -5px

			&:after
				margin-top: 5px

	&.amy-menu-toggle-open a span
		background: rgba(0, 0, 0, 0)

		&:before
			@include transform(rotate(45deg) translate(3px, 3px))

		&:after
			@include transform(rotate(-45deg) translate(4px, -4px))


#amy-navigation-mobile
	opacity: 0
	background-color: #ffffff
	height: 100%
	left: -346px
	right: auto
	position: fixed
	top: 0
	width: 346px
	z-index: 1
	@include transition(all 0.6s ease 0s)
	@include box-shadow(-2px 0 10px #000000)

	a.navbar-brand.logo
		display: inline-block
		margin: 40px 0 0 40px

	&.menu-open
		opacity: 1
		left: 0

	ul + ul
		padding-top: 0
		margin-top: -20px

		> li:first-child
			border-top: none

	.amy-dropdown-plus
		position: absolute
		top: 0
		right: 0
		cursor: pointer
		background-color: $theme-color
		@include transition(all 0.2s)

		&:hover
			background-color: darken($theme-color, 3%)

		.fa
			display: block
			text-align: center
			font-size: 13px
			width: 48px
			height: 48px
			line-height: 48px
			color: #555
			@include transition(all 0.2s)

	.amy-dropdown-times .fa
		color: #fff
		@include transform(rotate(45deg))

	.current-menu-ancestor > a,
	.current-menu-item > a
		color: $theme-color-active

	a
		@include transition(all .2s)
		text-decoration: none

	ul
		margin: 0
		padding: 30px 0
		list-style: none

		ul
			position: relative
			display: none
			padding: 0
			margin-left: 0

			&:before
				content: ""
				width: 0
				height: 0
				border-left: 5px solid transparent
				border-right: 5px solid transparent
				border-top: 5px solid $theme-color
				position: absolute
				top: 5px
				left: 30px

			li
				border-left: none
				border-right: none

				&:first-child
					border-top-width: 5px
					border-top-color: $theme-color

				&:last-child
					border-bottom: none

				a
					padding-left: 30px

		li
			position: relative
			border: none
			border-bottom: none
			margin: 0

			ul li
				border: 1px solid $theme-color

			&:last-child
				border-bottom: 1px solid $theme-color

			a
				display: block
				font-size: 22px
				padding: 10px 40px
				color: $theme-color
				font-family: $headings-font-family

				&:hover
					color: $theme-color-active

				&:focus
					outline: none

			&.menu-item-has-children
				> .amy-dropdown-plus
					display: block

				> a
					border-right: none
					margin-right: 50px

	.amy-fancy-mobile-menu
		padding: 20px 0

	.amy-fancy-mobile-menu ul
		padding-top: 0
		padding-bottom: 0