header#topbar {
	background-color: var(--topbar-background);
	position: sticky;
	display: flex;
	align-items: center;
	height: var(--topbar-height);
	box-shadow: 1px 2px 10px #999;
	font-weight: 500;
	top: 0;
	color: var(--topbar-text-color);
	font-size: 125%;
	z-index: 10000;

	a {
		color: inherit;
		text-decoration: none;
		padding: 0;
	}
	
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}
}

#container-logo {
	display: flex;
	margin-right: auto;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: var(--topbar-element-padding);
	
	a {
		display: flex;
		align-items: center;
		gap: 0.3ch;
	}

	img {
		background: white;
		color: black;
		width: 4em;
		border: 4px solid white;
		z-index: 100000;
	}
}

#navigation {
	height: 100%;

	ul {
		display: flex;
		height: 100%;
		align-items: center;

		li {
			flex: 1 1 0;
			border-collapse: collapse;
			border-left: var(--navigation-border);
			border-right: var(--navigation-border);
			height: 100%;

			&:first-child {
				border-left-width: 2px;
			}
			&:last-child {
				border-right-width: 2px;
			}
			&:hover {
				background-color: var(--navigation-hover-background);
				color: var(--navigation-hover-text-color);
			}

			a {
				padding: var(--topbar-element-padding);
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	@media screen and (max-width: 650px) {
		background-color: var(--topbar-background);
		position: fixed;
		bottom: 0;
		width: 100%;
		height: var(--navigation-mobile-height);
		box-shadow: 1px -2px 10px #999;

		ul {
			justify-content: space-evenly;

			li {
				flex: 1;

				&:first-child {
					border-left: none;
				}
				&:last-child {
					border-right: none;
				}

				
			}
		}
	}
}

#user-menu {
	padding: var(--topbar-element-padding);
	height: 100%;
	
	> summary {
		cursor: pointer;
	}
	
	&[open] > summary {
		&::before {
			content: "";
			background-color: transparent;
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: rgb(0 0 0 / 0.2);
		}
		
	}
	
	&:hover {
		background: var(--navigation-hover-background);
		color: var(--navigation-hover-text-color)
	}
	
	/* user is logged out */
	&:has(a#user-icon) {
		display: flex;
		padding: unset;
		
		#user-icon {
			padding: var(--topbar-element-padding);
			justify-content: center;
		}
	}
	
	&::details-content {
		/* TODO refine */
		background-color: white;
		border: 1px solid gray;
		box-shadow: 2px 1px 5px gray;
		border-radius: 0.5em;
		position: fixed;
		right: 10px;
		overflow: hidden;
		overflow: clip;
		height: 0;
		transition-property: display height;
		transition-duration: 50ms;
		transition-behavior: allow-discrete;
	}

	&[open]::details-content {
		display: block;
		height: auto;
		
		@starting-style {
			height: 0;
		}
	}

	.menu-item {
		display: block;
		color: var(--text-color) !important;
		padding: 0.5em 1em;
		
		&:hover {
			background-color: lightgrey;
		}
	}
	
	#user-icon {
		display: flex;
		align-items: center;
		flex-flow: column;

		&::marker {
		  list-style: none;
		  marker: none;
		  content: "";
		}
	}

	#user-role {
		background-color: white;
		border-radius: 1em;
		color: black;
		width: fit-content;
		padding: 0.1em 1ch;
		user-select: none;
	}

	#user-kuerzel {
		display: none;
	}

	@media screen and (max-width: 850px) {
		#user-mail {
			display: none;
		}

		#user-kuerzel {
			display: unset;
		}
	}
}