
#sulo-index #sulo-navbar, #sulo-navbar {
	.icon {
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		svg {
			height: 26px;
			width: 26px;
			viewBox: 0 0 26 26;
			g {
				stroke-width: 2;
			}
		}
	}
}

#sulo-navbar, #sulo-sidebar {
	.category, .contact {
		font-weight: bold;
		text-transform: uppercase;
		font-size: 90%;
		span {
			// vertical-align: middle;
		}
	}
}
#sulo-navbar {
	.top-bar-right {
		li {
			// padding-left: 0.5rem;
		}
	}
	.top-bar-left {
		ul {
			li:last-child {
				border-right: $global-border;
			}
			li:nth-child(3) {
				border-left: $global-border;
			}
			align-items: center;
		}
	}
	position: absolute;
	@include breakpoint(large) {
		position: fixed;
	}
	width: 100%;
	z-index: $navbar-zindex;

	
	.contact {
		display: flex;
		align-items: center;
		font-size: 80%;
	}
	.user-photo-item > a {
		padding: 0 0.5rem;
		display: flex;
		align-items: center;
		.photo-container {
			margin-left: 0.5rem;
			border-color: $medium-gray;
			min-width: 2rem;
		}
	}
	.store-photo-item > a {
		padding: 0 0.5rem;
		.photo-container {
			border-radius: 6px;
			min-width: 2rem;
		}
	}

	.shopping-bag-icon {
		position: relative;
		display: block;
		.icon {
			opacity: 0.7;
		}
		$color: map-get($foundation-palette, search);
		// align-items: top;
		// .badge-container {
			// padding-top: 100%;
			// min-width: 3rem;
			// position: relative;
			.badge {
				position: absolute;
				top: 0.6rem;
				left: 1.75rem;
				height: 1rem;
				background: $color;
				font-weight: $global-weight-bold;
				color: $black;
				// outline: $white solid;
				// outline-offset: -1px;
				// padding: 0.4rem;
				// box-sizing: border-box;
				// border: 1px solid $white;
			}
			// display: none;
			// flex: 0 0 auto;
			// padding-top: 100%;

		// }
	}
	li > a.unauthed {
		pointer-events: none;
		color: $medium-gray;
		// text-decoration: line-through;
	}
	li a.chat-notifications {
		padding: 0.5rem $global-padding;
	}
}

.navbar-container {
	background: $navbar-background-color;
	// box-shadow: 0 0 1px 0 rgba($black, 0.05);
	border-bottom: $global-border-secondary;
	display: flex;
	align-items: center;
	height: $navbar-height;
	// font-size: 0.9rem;
	@include breakpoint(medium) {
		font-size: 1rem;
	}
}

.navbar {
	flex: 1;
	// max-width: $global-width;
	margin: 0 auto;
	padding: 0;
	.button.tiny {
		font-size: 0.8rem;
	}
	&.top-bar, ul {
		background: transparent;
	}
	input {
		@include sulo-form-element(rem-calc(16));
		margin: 0;
	}
}

.navbar-blur {
	@extend .navbar-container;
	filter: blur(20px);
}

#shopping-icon {
	padding-right: 0;
	@include breakpoint(medium) {
		padding: 0.7rem 1rem;
	}
}

.navbar-live {
	border-right: $global-border;
	border-left: $global-border;
	text-transform: uppercase;
	font-weight: $global-weight-bold;
	// color: map-get($foundation-palette, sulo-dark);
	// &:hover {
	// 	color: map-get($foundation-palette, sulo);
	// }
	// letter-spacing: 1px;
	// font-weight: $global-weight-bold;
	// font-size: 80%;
}
#navbar-brand {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1rem;
	color: $sulo-dark-color;
	letter-spacing: -0.25px;
	font-family: $header-font-family-sans-serif;
	// border-right: $global-border;

	@include breakpoint(medium) {
		font-size: 1.1rem;
	}
}
