/* header-countries jsou nahrazeny .header__grouplinks */

.header {
	position: fixed;
	z-index: 9999;
	width: 100%;
	top: 0;
	left: 0;
	background: $color--gray;
	color: $color--white;
	padding: 1rem 1.5rem;

	body.overlayered & {
		z-index: 9998;
	}
}

.header__hamburger {
	display: none;
	color: $color--white;
	@media(max-width: $small-width) {
		display: inline-block;
		float: left;
		width: 2.8rem;
		height: 2.8rem;
		margin: -0.5rem 2rem -0.5rem -0.5rem;
		transition: all 0.2s ease;
		cursor: pointer;
		svg {
			font-weight: 100;
			font-size: 2.6rem;
			display: inline-block;
		}
		svg.arr {
			display: none;
		}
		.menu--show & {
			svg.ham {
				display: none;
			}
			svg.arr {
				display: inline-block;
			}
		}
	}
	&:hover {
		color: $color--mint;
	}
}

.header__left {
	float: left;
	text-align: left;
	line-height: 15px;
	height: 15px;
	font-size: 1.2rem;

	&:before {
		background: url('../../../project/www/imgs/logo.png');
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		content: '';
		display: inline-block;
		float: left;
		margin-right: 0.8rem;
		height: 1.5rem;
		width: 1.5rem;
	}
}


.header__userbox {
	display: inline-block;
	float: right;
	font-size: 1.2rem;
	height: 1.5rem;
	line-height: 1.5rem;
	position: relative;
	cursor: pointer;
	margin-left: 2rem;
}
.header__userbox__img {
	display: inline-block;
	width: 2rem;
	//height: 2rem;
	margin: 0 1rem 0 0;
	float: left;
	opacity: 0.5;
	transition: 0.1s all linear;
	.svg-inline--fa {
		display: inline-block;
		width: 2rem;
		height: 2rem;
		margin: -0.2rem 0.6rem 0.2rem 0;
	}
}

.header__userbox__name {
	display: inline-block;
	float: right;
	font-size: 1.2rem;
	color: rgba($color--white, 0.8);
}

.header__userbox__popup {
	position: absolute;
	top: 2.8rem;
	right: 0;
	display: none;
	background: lighten($color--seashell, 20%);
	box-shadow: 0 0 10px -5px rgba(#000, 0.2);
	color: $color--black;
	padding: 15px 20px;
	font-weight: 600;
	border-radius: 5px;

	&:before {
		content: "";
		display: block;
		border-top: none;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 11px solid lighten($color--seashell, 20%);
		position: absolute;
		top: -10px;
		left: calc(50% - 10px);
		z-index: 4;
	}

	a {
		display: inline-block;
		width: 100%;
		clear: both;
		opacity: 0.7;
		position: relative;
		z-index: 99;
		min-width: 11rem;
		padding: 0.5rem 0.3rem;
		border-bottom: 1px solid rgba($color--seashell, 0.5);

		&:last-child {
			border-bottom: none;
			&:after {
				content: "";
				display: inline-block;
				float: right;
				width: 15px;
				height: 15px;
				background-image: url(imgs/exit.svg);
				background-size: contain;
				margin-left: 2rem;
				opacity: 0.9;
			}
		}
		&:hover {
			opacity: 1;
			text-decoration: none;
		}
	}
}

.header__userbox.active,
.header__userbox:hover {
	.header__userbox__img { opacity: 1; }
	.header__userbox__name { text-decoration: none; color: $color--white; }
}

.header__grouplinks {
	@extend .header__userbox;
	padding: 0 2rem;
	border-right: 1px solid rgba($color--seashell, 0.2);
}

.header__grouplinks__popup {
	position: absolute;
	top: 2.8rem;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	background: lighten($color--seashell, 20%);
	box-shadow: 0 0 10px -5px rgba(#000, 0.2);
	color: $color--black;
	padding: 15px 20px;
	font-weight: 600;
	border-radius: 5px;

	&:before {
		content: "";
		display: block;
		border-top: none;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 11px solid lighten($color--seashell, 20%);
		position: absolute;
		top: -10px;
		left: calc(50% - 10px);
		z-index: 4;
	}
}

.header__grouplink {
    display: block;
    float: none;
    margin: 0 0.5rem;
    width: auto;
    min-height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
	opacity: 0.7;
	margin: 0.5rem;
	padding-left: 3.2rem;
	position: relative;
	border-bottom: 1px solid rgba($color--seashell, 0.5);

	&:last-child {
		border-bottom: none;
	}
	&:hover {
		opacity: 1;
		text-decoration: none;
	}
}

.header__grouplink--active {
	@extend .header__grouplink;
	margin: 0;
	border-bottom: none;
}

.header__grouplink__img {
	width: 2.2rem;
	height: 2rem;
	display: block;
	position: absolute;
	top: 0;
	left: 0;

	svg, img {
		width: 100% !important;
	}
}

/* Delete in new version - just for back compatibility >> */

.header__countries {
	@extend .header__grouplinks;
}

.header__countries__popup {
	@extend .header__grouplinks__popup;
}

.header__country {
    display: block;
    float: none;
    margin: 0 0.5rem;
    width: 5.5rem;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    box-shadow: 0 0 5px -2px rgba(0,0,0,0.3);
	opacity: 0.9;
	margin: 0.5rem;
	padding-left: 3.5rem;
	
	&:hover {
	  opacity: 1;
	}
}

.header__country--active {
	 @extend .header__country;
	 margin: 0;
}


/* << Delete in new version - just for back compatibility */