.nav {
	width: 100%;
	padding: #{10 / $base-font-size}rem #{32 / $base-font-size}rem 0 #{32 / $base-font-size}rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.nav__items-left, .nav__items-right {
	@include themify() {
		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
	}
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding: #{3 / $base-font-size}rem 0;
}

.nav__item {
	position: relative;
	padding: 0 #{24 / $base-font-size}rem;
	text-align: center;
}

.nav__item:first-child {
	padding-left: #{15 / $base-font-size}rem;
}

.nav__item:last-child {
	padding-right: #{15 / $base-font-size}rem;
}


.nav__dropdown {
	@include themify() {
		background-color: map-get($theme-map, 'background-color');
		border: 1px solid map-get($theme-map, 'ide-border-color');
	}
	@extend %hidden-element;
	& li + li {
		margin-top: #{10 / $base-font-size}rem;
	}
	width: #{140 / $base-font-size}rem;
	.nav__item:hover & {
		display: flex;
		position: absolute;
		flex-direction: column;
		padding: #{10 / $base-font-size}rem;
		left: #{-10 / $base-font-size}rem;
		height: auto;
	}
}

.login__items {
	@include themify() {
		color: map-get($theme-map, 'inactive-text-color');
	}	
}

.login__items span.spacer {
	padding: 0 #{15 / $base-font-size}rem;
}