@use "_theme" as *

nav
	--bg: #{$fg}
	--fg: #{$bg}
	background: var(--bg)
	color: var(--fg)
	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125)
	display: flex

	.dropdown
		position: relative
		display: flex
		padding: 0

		.dropdown-content
			flex-direction: column
			position: absolute
			top: 100%
			right: 0
			min-width: 100%

		&:not(:hover) .dropdown-content
			display: none !important

	& > *, .dropdown .link
		padding: 0.45em

		& > *
			vertical-align: middle

	.link
		color: var(--fg)
		font-weight: bold
		white-space: nowrap
	
	a.link
		text-decoration: none

	& > .right
		margin-left: auto

	img
		height: 32px
		border-radius: 100%

.dropdown:hover > .link, nav > .link:hover
	--fg: #{$fg}
	--bg: #{$bg}
	background: var(--bg)
	cursor: pointer

.icon
	height: 1.5em
	vertical-align: middle