// ==========================================================================
// Menus
// ==========================================================================

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-navigation ul.toggle-on {
	display: block;
	position: relative;
}
.main-navigation ul ul {
	padding-left: 32px;
	margin-top: 16px;
	margin-bottom: -16px;
	border-bottom: 0;
}
.main-navigation ul ul.toggle-on:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 1px;
	background: #eaeaea;
}
.main-navigation li {
	position: relative;
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px solid #eaeaea;
}
.main-navigation a {
	display: block;
	text-decoration: none;
	border-bottom: none;
}
.page_item_has_children > a,
.menu-item-has-children > a {
	position: relative;
	padding-right: 62px;
}

/* Menu Toogle */
.menu-toggle {
	background-color: transparent;
	border: 1px solid $color__border--primary;
	color: $color__link;
	position: absolute;
	top: 32px;
	right: 32px;
	padding: 0;
	width: 64px;
	height: 64px;
}

.menu-toggle:before {
	content: "\f419";
	height: 64px;
	width: 64px;
	color: inherit;
	font-size: 16px;
	line-height: 64px;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background-color: transparent;
	border: 1px solid $color__link;
}

.menu-toggle.toggle-on:before {
	content: "\f405";
	height: 64px;
	width: 64px;
	font-size: 32px;
	line-height: 64px;
}

/* Menu Description */
.menu-item-description {
	display: block;
	color: rgba(0, 0, 0, 0.6);
	font-weight: normal;
}

/* Dropdown Toggle */
.dropdown-toggle {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	top: 7px;
	right: 0;
	padding: 0;
	width: 50px;
	height: 50px;
	background: #fff;
	border: 1px solid $color__border--primary;
}
.dropdown-toggle:before {
	content: "\f431";
	position: absolute;
	top: 11px;
	right: 11px;
	height: 24px;
	width: 24px;
	color: #333;
	font-size: 24px;
}
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active {
	background: #fff;
	border-color: $color__link;
}
.dropdown-toggle:hover:before,
.dropdown-toggle:focus:before,
.dropdown-toggle:active:before {
	color: $color__link;
}
.dropdown-toggle.toggle-on:before {
	content: "\f432";
}
