// ---------- #TOP MENUS

.top-bar {
	@extend .clearfix;
	background: black;
	color: $gray;

	// First Level Hover Color
	svg {

		transition: color 0.2s;

		&:hover {
			color: $secondary;
		}
	}

	@include query-below($lap) {
		display: none;
	}
}

.svg .top-bar .flag__img {
	width: 30%;

	svg {
		margin-top: 0.08em;
		width: auto !important;
		margin-left: 0;
	}

	text {
		fill: white;
		stroke-width: 0;
	}
}

.nav-trigger {
	@extend %menu-item;
}

.nav__item--search {
	> button {
		border: 0;
		background-color: transparent;
		color: #b8b6b7;
		padding: rem(15px);
		display: inline-block;
		zoom: 1;
		font-family: "Open Sans", sans-serif;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		font-weight: 400;
		text-decoration: none;
		transition: all 0.15s;

		&:focus {
			outline: 1px dotted $accent;
		}
	}

	> button:before {
		font-family: FontAwesome;
		content: $fa-var-search;
		margin-right: 5px;
	}
}

.nav--toolbar {
	@extend %nav--social;
	display: inline-block;

	@include query-above($lap) {
		margin-left: rem(-15px);
		margin-right: rem(-15px);
	}

	> .menu-item {
		@extend %menu-item;
		font-size: rem(11px);

		&:hover > a {
			color: white;
		}

		> a {
			color: $gray;
			@extend %delta;
			padding: rem(15px);
		}
	}

	> .menu-item-has-children,
	> .menu-item--mega {
		margin-right: rem(3px);

		> a {

			&:after {
				top: rem(22px);
				right: 5px;
			}
		}
	}

	& + & {
		margin-left: rem(15px);
	}

	// ul {
	// 	@extend %sub-menu;
	// 	background: black;
	// }
}

// this is needed to overwrite .top-bar a
// maybe find a better solution
.separator--text.separator--text {
	color: $secondary;
}