#navigation
	horizontal
	overflow hidden
	background-color nav-color
	justify-content center
	// border-bottom ui-border

.navigation-link
	color nav-link-color

	:after
		content ""
		display block
		height hover-line-size
		background-color nav-link-hover-slide-color
		transform scaleX(0)
		opacity 0
		default-transition

	:hover,
	&.active
		color nav-link-hover-color
		cursor pointer
		:after
			transform scaleX(1.0)
			opacity 1

	&.active
		// text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5)
		text-shadow 1px 1px 3px rgba(4, 4, 4, 0.1)

.navigation-button
	horizontal
	font-size 1em
	line-height 1em
	padding 0.75em 1em

	.icon
		margin-right 0

.navigation-text
	display none

#search
	background transparent
	border none !important
	box-shadow none !important
	font-size 1em
	padding 0
	width 0
	flex-grow 1

// #search
// 	flex 1
// 	border-radius 0
// 	background transparent
// 	border none
	
// 	color nav-link-hover-color
// 	font-size 1em
// 	min-width 0

// 	::placeholder
// 		color nav-link-color

// 	:focus
// 		border none
// 		box-shadow none

// .extra-navigation
// 	display none

// .extension-navigation
// 	display none

// > 330px
// 	.navigation-button, #search
// 		font-size 1.3em

// > 550px
// 	#navigation
// 		padding 0 content-padding

// > 930px
// 	.navigation-button, #search
// 		font-size 1.2em
	
// 	#navigation
// 		justify-content flex-start
	
// 	.extra-navigation
// 		display block

// @media screen and (max-device-height: 500px)
// 	#navigation
// 		vertical
// 		height 100%
// 		padding content-padding 0
	
// 	#container
// 		horizontal

// 	.extra-navigation
// 		display block

// 	#sidebar-toggle,
// 	.hide-landscape
// 		display none !important

// 	#search
// 		display none