@use './common'

.navbar
	overflow: visible
	background-color: #333
	color: white
	font-family: Arial sans-serif
	font-size: 1rem
	position: relative
	ul
		list-style: none
		margin: 0
		padding-left: 0
		background: inherit
		li:hover
			cursor: pointer
		li:hover, li:focus-within
			background: #33492b
			text-shadow: 0 0 20px rgb(255, 255, 255)
		li:focus-within
			outline: none
		//li:hover div.dropdown-content, li div.dropdown-content:hover, li:hover div.dropdown-chevron, li div.dropdown-chevron:hover,
		//li:focus-within div.dropdown-content, li div.dropdown-content:focus-within, li:focus-within div.dropdown-chevron, li div.dropdown-chevron:focus-within,
		li.display > div.dropdown-content, li.display > div.dropdown-chevron
			visibility: visible
			opacity: 1
			display: block
		li
			@extend .noselect
			color: white
			background: inherit
			display: block
			float: left
			padding: .5rem 1rem
			text-decoration: none
			transition-property: background
			transition-duration: 0.5s
			cursor: pointer
			a
				text-decoration: none
				color: white
			div.dropdown-chevron
				cursor: default
				text-shadow: none
				visibility: hidden
				position: relative
				display: none
				overflow: visible
				top: 0
				left: 0
				text-align: center
				font-size: 2rem
				cursor: pointer
				i
					top: 0
					left: 0
					//padding-top: 2rem
					position: absolute
					width: 100%
					height: 2rem
					font-size: 3rem
					line-height: 2rem
					//color: #333
					z-index: 9999
					color: white
			div.dropdown-content
				tab-index: -1
				cursor: default
				padding-bottom: 2rem
				transition-property: opacity
				transition-duration: 1.5s
				text-shadow: none
				background-color: #333
				color: white
				min-height: 20rem
				visibility: hidden
				opacity: 0
				min-width: 5rem
				position: absolute
				transition: all 0.5s ease
				top: 100%
				left: 0
				display: none
				width: 100%
				z-index: 9998
				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2)
				border-top: white 1rem solid
	.dropdown-content
		h1
			font-size: 3rem
			font-family: Roboto Arial sans-serif
			margin: .6rem 0 .6rem 0
			color: #c2e09d
			//background-color: #555
			border-bottom: 2px solid grey
			width: 100%
		h2
			font-size: 1.5rem
			font-family: Roboto Arial sans-serif
			margin: .6rem 0 .4rem 0
			border-bottom: #656565 1.5px dashed
			color: #CCC
		.row
			width: 100%
		a
			@extend .noselect
			font-size: 1rem
			font-family: Roboto Arial sans-serif
			color: white
			text-decoration: none
			margin: .5rem 0 .5rem .6rem
			display: block
		a:hover
			color: #ff7700
			text-decoration: underline

//
//@media only screen and (max-width: 950px)
//	.navbar
//		font-size: 0.85rem
//		ul li
//			padding: 0.7rem 1.3rem
//
//
//@media only screen and (max-width: 760px)
//	.navbar
//		font-size: 0.7rem
//		ul li
//			padding: 0.45rem .9rem
//
//
@media only screen and (max-width: 500px)
	.navbar
		font-size: 1.4rem
		.dropdown-content
			h1
				font-size: 2rem
			h2
				font-size: 2rem
			a
				font-size: 1.5rem