// --------------------------------------------------------------------------------------------
// TOP BAR / #basel-top-bar
// --------------------------------------------------------------------------------------------

.topbar-wrapp {
	width: 100%;
	height:42px;
	// line-height:42px;
	font-size: 13px;
	letter-spacing: .3px;
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);

	.widgettitle,
	.widget-title,
	label {
		font-size: 10px;
		border:none;
		padding-bottom:0;
		text-transform: uppercase;
	}

	h1,h2,h3,h4,h5,h6,p {
		margin-bottom:0;
		display: inline-block;
		vertical-align: middle;
	}

	h1,h2,h3 {
		font-size:14px;
	}

	h4,h5,h6 {
		font-size:12px;
	}

	.social-icons {
		display: inline-block;
		vertical-align: middle;

		li {
			margin-top: 0;
			margin-right: 3px;
			margin-left: 3px;
			line-height: 1;
		}
	}

	&.color-scheme-light {
		border-bottom:none;

		.top-bar-left {
			color: rgba(255, 255, 255, 0.9);

			p {
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
}

.topbar-content {
	display: table;
	width: 100%;

	&:before {
		content: "";
		height: 42px;
		display: table-cell;
		vertical-align: middle;
	}
}

.top-bar-left {
	display: table-cell;
	vertical-align: middle;
	overflow: hidden;
	line-height: 21px;
}

.top-bar-right {
	display: table-cell;
	vertical-align: top;
}

.topbar-menu {
	float: right;

	ul.menu {
		white-space: nowrap;
	}

	ul {

		li {
			
			a {
				.menu-label {
					display:none;
				}

				i {
					margin-right:5px;
				}
			}
		}

		> li {
			position: relative;
			margin-left: -2px;
			display:inline-block;
			line-height: 42px;
			@include scale-link;

			> a {
				text-transform: uppercase;
				font-size:12px;
			}

			> .sub-menu-dropdown {
		 		position: absolute;
				right: 0;
				top:120%;
				z-index: 370;
				width: 150px;
				background-color: white;
				padding: 15px;
				visibility: hidden;
		 		opacity: 0;
				-webkit-transition:all 0.2s ease-in-out;
				transition:all 0.2s ease-in-out;
				@include shadow-drop-element;

				.container {
					width:auto;
					padding:0;
				}

				li {
					display: block;
					line-height:1.6;
					margin-bottom: 10px;
					margin-left: 0;
					margin-right: 0;
					padding:0;
						
					&:before {
					 	content:none;
					}

					&:last-child {
						margin-bottom: 0;
					}

					> a {
						display:block;
						font-size: 13px;
						padding: 2px 0;
						color: #3C3C3C;
						font-weight: 400;
						text-transform: none;

						&:after {
							content:none;
						}

						&:hover,
						&:focus {
							color:$primary-color;						
						}
					}

					.sub-sub-menu {
						margin-top:10px;
					}
				}

				&:after {
					@include font-icon($icon-caret-up);
					position: absolute;
					top:-3px;
					right:20px;
					line-height: 0;
					font-size: 24px;
					color: white;
				}
		 	}

			&:before {
			 	content:" ";
			    display: inline-block;
			    height: 25px;
			    width: 1px;
			    background-color: rgba(0, 0, 0, 0.05);
			    margin-left: 10px;
			    margin-right: 10px;
			    vertical-align: middle;
			}

			&:first-child:before {
				content:none;
			}

			&:hover > .sub-menu-dropdown {
		 		visibility: visible;
		 		opacity: 1;
		 		top:100%;
		 	}
		}
	}

	.color-scheme-light & {

		ul.menu {

			> li {

				> a {
					color: rgba(255, 255, 255, 1);

					&:hover {
						color: rgba(255, 255, 255, 0.9);
					}

					&:after {
						background-color: rgba(255, 255, 255, 0.7);
					}
				}

				&:before {
				    background-color: rgba(255, 255, 255, 0.1);
				}
			}
		}
	}
}