.main-header {
	background: $color__secondary;
	overflow: hidden;

	.unit-header {
		position: relative;
		display: flex;
		flex: 0 1 auto;
		height: 50px;
		@include transition();
	}
	.title {
		width: 100%;
		line-height: 50px;
		padding: 0 10px;
		color: rgba(255,255,255,0.7);
		white-space: nowrap;
		overflow: hidden;

		input {
			background: none;
			border: 0;
			color: #fff;
			width: 100%;
			&:focus {
				background: #fff;
				color: rgba(0,0,0,0.7);
			}
		}
	}
	.media {
		background: darken($color__secondary, 4%);
	}
	.edit {
		margin-left: auto;
		transition: none;
		.button-icon {
			@include transition();
			color: rgba(#fff, 0.4);
		}
		&:hover .button-icon {
			color: $color__green;
		}
	}
	.save {
		opacity: 0;
		position: absolute;
		right: -5px;
		pointer-events: none;
		transition: all 0.2s ease-out;
		&.active {
			opacity: 1;
			right: 0;
			pointer-events: auto;
		}
	}
	.mobile-navigation {
		display: none;
		width: 38px;
		min-width: 38px;
		line-height: 50px;
		text-align: center;

		.icon {
			color: rgba(255,255,255,0.4);
			transition: all 0.2s ease-out;
			line-height: 1;
			font-size: 18px;
		}
		&:hover {
			cursor: pointer;
			.icon {
				color: rgba(255,255,255,0.8);
			}
		}
		@media ( max-width: 480px ) {
			display: block;
		}
	}
}