.top-nav {
	background-color: #ffffff;
	position: relative;
	z-index: 10;
	line-height: 35px;
	border: $base-border;
	border-width: 1px 0;
	color: $base-color;

	.main-nav-below.top-nav-above &{
		border-top-width: 0;
	}

	a:not(.button):not(:hover){
		color: $base-color;
	}

	.components > li:hover > a{
		color: $brand-color;
	}
}

.topbar-wrapper{
	display: flex;
	min-height: 35px;
}

.top-nav {
	&.has-menu,
	&.has-components{
		.topbar-wrapper{
			display: block;
		}
	}

	.tie-alignleft,
	.tie-alignright{
		flex-grow: 1;
		position: relative;
	}

	&.has-breaking-news{
		.tie-alignleft{
			flex: 1 0 100px;
		}

		.tie-alignright{
			flex-grow: 0;
			z-index: 1;
		}
	}

	&.has-date-components .tie-alignleft,
	&.has-date-components-menu,
	.top-nav-boxed &.has-components{
		.components > li:first-child:not(.search-bar){
			border-width: 0;
		}
	}

	@include breakpoint(md){
		.header-layout-1.top-nav-below:not(.has-shadow) &{
			border-width: 0 0 1px;
		}
	}
}

.topbar-today-date{
	float: left;
	padding-right: 15px;
	font-size: 12px;
	flex-shrink: 0;

	&:before{
		font-size: 13px;
		content: "\f017";
	}
}

// Top Menu ----------------------------------------------------
.top-menu{
	.menu {
		a{
			padding: 0 10px;
		}

		li:hover > a{
			color: $brand-color;
		}

		ul{
			display: none;
			position: absolute;
			background: #ffffff;
		}

		li:hover > ul{
			display: block;
		}

		li{
			position: relative;
		}

		ul.sub-menu a{
			width: 180px;
			line-height: 20px;
    	padding: 7px 15px;
		}
	}

	.tie-alignright &{
		float: right;
		border-width: 0 1px;
	}

	.menu .tie-current-menu > a{
		color: $brand-color;
	}
}


//Boxed Topbar--------------------------------------------------
@include breakpoint(md){
	.top-nav-boxed .top-nav {
		background: transparent !important;
		border-width: 0;
	}

	.top-nav-boxed {
		.topbar-today-date{
			padding: 0 15px;
		}

		.top-nav {
			background: transparent;
			border-width: 0;
		}

		.topbar-wrapper {
			background: #ffffff;
			border: $base-border;
			border-width: 0 1px 1px;
			width: 100%;
		}

		&.main-nav-above.top-nav-below:not(.header-layout-1) .topbar-wrapper{
			border-width: 1px;
		}

		&.has-shadow{
			&.top-nav-below,
			&.top-nav-below-main-nav {
				.topbar-wrapper{
					border-width: 1px 1px 0 !important;
				}
			}
		}

		&.main-nav-below.top-nav-below-main-nav .has-breaking-news .topbar-wrapper{
			border-left-width: 0 !important;
		}

		.has-menu,
		.has-components{
			.topbar-wrapper {
				border-width: 0 1px 1px;
			}
		}

		.tie-alignright .search-bar {
		  border-right-width: 0;
		}

		.tie-alignleft .search-bar {
		  border-left-width: 0;
		}

		.has-date-components,
		.has-date-components-menu{
			.tie-alignleft .search-bar {
			  border-left-width: 1px;
			}
		}
	}
}


//Topbar Components---------------------------------------------
.top-nav{
	.tie-alignleft{
		.components,
		.components > li{
			float: left;
		}

		.comp-sub-menu{
			right: auto;
			left: -1px;
		}
	}
}

//TopBar Dark Skin----------------------------------------------
.top-nav-dark{
	.top-nav{
		background-color: $top-nav-dark-bg;
		color: $dark-base-color;
	}

	// version 5.0
	//#top-nav,
	//#top-nav .topbar-wrapper{
		//border-width: 0;
	//}

	.top-nav *{
		border-color: $base-border-color-in-white;
	}

	// breaking news
	.top-nav .breaking a{
		color: $dark-base-color;

		&:hover{
			color: #ffffff;
		}
	}

	// components
	.top-nav .components {
		> li > a,
		> li.social-icons-item .social-link:not(:hover) span{
			color: $dark-base-color;
		}

		> li:hover > a {
			color: #ffffff;
		}
	}

	// top menu
	.top-nav .top-menu li a{
		color: $dark-base-color;
		border-color: rgba(255,255,255,0.04);
	}

	.top-menu{
		ul{
			background: $top-nav-dark-bg;
		}

		li:hover > a{
			background: rgba(0,0,0,0.1);
			color: $brand-color;
		}
	}

	&.top-nav-boxed {
		.top-nav {
			background-color: transparent;
		}

		.topbar-wrapper {
			background-color: $top-nav-dark-bg;
		}

		&.top-nav-above.main-nav-below .topbar-wrapper {
			border-width: 0;
		}
	}
}

.top-nav-light #top-nav,
.main-nav-light #main-nav{
	.weather-icon{
		.icon-cloud,
		.icon-basecloud-bg,
		.icon-cloud-behind{
			color: #d3d3d3;
		}
	}
}

//Top Nav Media Queries-----------------------------------------
@include breakpoint(max_min_md){
	.top-nav:not(.has-breaking-news),
	.topbar-today-date,
	.top-menu,
	.theme-header .components{
		display: none;
	}

	//.is-header-layout-1 .top-nav-below .top-nav.has-breaking-news{
		//border-top-width: 0;
	//}
}

// Hide the breaking news till its CSS loaded
.breaking{
	display: none;
}