_topbar.scss

@use 'vars';

.top-gap {
	height: vars.$top-bar-margin;
	width: 100%;
}

#top-bar {
	position: sticky;
	z-index: 10;
	top: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: 'nav-left nav-middle nav-right';
	height: vars.$top-bar-height;
	width: calc(100% - vars.$top-bar-margin);
	background-color: vars.$background-color-nav;
	
	
	.nav-item {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		color: white;
		padding: 0 20px;
		margin-left: 5px;
		margin-right: 5px;
		font-weight: 600;
		font-size: 18px;
		height: 100%;
		border-radius: calc(vars.$top-bar-height / 2);
		
		&:hover {
			cursor: pointer;
			color: vars.$color-hover;
			background-color: vars.$background-color-nav-hover;
		}
	}
	
	.nav-left {
		display: flex;
		justify-content: flex-start;
	}
	
	.nav-right {
		display: flex;
		justify-content: flex-end;
	}
	
	#hamburger {
		margin-left: 0px;
	}
	
	#logo {
		padding-left: 5px;
		padding-right: 20px;
		
		&:hover {
			background-color: vars.$background-color-nav;
		}
		img {
			height: vars.$top-bar-height - 4px;
			padding-right: 4px;
		}
		div {
			font-weight: 700;
			font-size: 22px;
		}
	}
}