/* 05.08. Top Navigation */
.navigation--top {
	text-align: center;
	margin: 0;
	padding: 0;

	@media (min-width: $screen-md-min) {
		text-align: right;
	}

	a {
		color: $text-color;
	}

	> li {
		list-style: none;
		position: relative;
		display: inline-block;

		> a {
			padding: 5px 10px 12px 10px;
			text-decoration: none;
			display: block;

			@media (min-width: $screen-md-min) {
				padding: 7px 0 7px 15px;
			}

			&:hover {
				color: $primary-color;
				background: none;
			}
		}

		&:hover {
			> .sub-menu {
				visibility: visible;
				opacity: 1;
			}

			> a {
				color: $primary-color;

				&::after {
					border-color: $primary-color transparent transparent transparent;
				}
			}
		}
	}

	.sub-menu {
		z-index: 215;
		text-align: left;
		display: block;
		visibility: hidden;
		opacity: 0;
		list-style: none;
		min-width: 120px;
		width: auto;
		position: absolute;
		padding: 0;
		margin-top: -1px;
		left: 0;
		top: 100%;
		transition: $primary-transition;

		> li {
			position: relative;

			> a {
				background: #2b2b2b;
				padding: 5px 15px;
				display: block;
				border-bottom: 1px solid #454545;
				white-space: nowrap;

				&:hover {
					color: $primary-color;
					text-decoration: none;
				}
			}

			&:hover {
				> .sub-menu {
					visibility: visible;
					opacity: 1;
				}
			}

			> .sub-menu {
				margin-top: 0;
				left: 100%;
				top: 0;
				border-left: 1px solid #454545;
			}
		}
	}

	> .menu-item-has-children {
		> a {
			padding-right: 12px;
			position: relative;

			&::after {
				font-family: "FontAwesome";
				content: "\f0d7";
				color: $text-color;
				position: absolute;
				right: 0;
				bottom: calc( 50% - 8px );

				@media (min-width: $screen-md-min) {
					margin-bottom: -2px;
				}
			}
		}
	}
}