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

.navigation-link
	color nav-link-color

	:after
		content ""
		display block
		height 3px
		background-color main-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
	display none
	border-radius 0
	background text-color
	border none
	color white

	:focus
		border none !important
		box-shadow none

.extra-navigation
	display none

	.navigation-text
		display none

	.navigation-button
		.icon
			margin-right 0

> 330px
	.navigation-button
		font-size 1.3em

> 930px
	.navigation-button
		font-size 1.1em
	
	#navigation
		justify-content flex-start
	
	.logged-out
		.navigation-text
			display inline-block
		
		.navigation-button
			.icon
				margin-right 0.5em

	#search
		display block
		flex 1
	
	.extra-navigation
		horizontal
		justify-content flex-end

< 400px height
	#navigation
		vertical
		height 100%
		padding content-padding 0
	
	#container
		horizontal

	.extra-navigation
		display none

	#search
		display none