@import "variables";

$bgColor: rgba(0, 0, 0, 0.3);

.nav {
	background-color: $bgColor;
	padding: 0;
	margin: 0;

	li.item {
		list-style-type: none;
	}

	a {
		text-decoration: none;
		padding: 12px 20px;

		&:hover, &.active {
			background-color: $bgColor * 0.6;
		}
	}

}

.top-nav {
	@extend .nav;
	border-bottom: 1px solid rgba(#ffffff, 0.1);
	display: flex;

	li.item {
		border-right: 1px solid rgba(#ffffff, 0.1);
		display: inline-block;

		a {
			display: inline-block;

			img {
				max-width: 18px;
				margin: 3px 7px 6px 0;
				vertical-align: middle;
			}

			&.logo {
				font-weight: 500;
				.fa {
					margin-right: 6px;
				}
			}

		}

		// Drop down menu
		ul {
			background-color: $bgColor * 0.6;
			display: none;
			padding: 0;
			position: absolute;

			&.visible{
				display: block;
			}

			li{
				list-style-type: none;

				a {
					border-bottom: 1px solid rgba(#ffffff, 0.08);
					display: block;
				}

			}
		}

		// Small screen devices
		@media (max-width: 768px) {
			&:not(:first-child) {
				display: none;
			}
		}

	}

}

.left-nav {
	@extend .nav;
	border-right: 1px solid rgba(#ffffff, 0.1);
	height: 100%;
	margin-top: 44px;
	width: 300px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;

	li.item {
		display: block;

		a {
			border-bottom: 1px solid rgba(#ffffff, 0.08);
			display: block;
		}

		// Drop down menu
		ul {
			background-color: rgba(0, 0, 0, 0.2);
			display: none;
			padding: 0;

			&.visible{
				display: block;
			}

			li{
				list-style-type: none;

				a {
					border-bottom: 1px solid rgba(#ffffff, 0.08);
					display: block;
					font-size: 0.95em;
					padding-left: 36px;
				}

			}
		}

	}
}
