@use '../../styles/variables' as c;

.header {
	background-image: url('./images/bg.png');
	padding: 0 10px;
	height: 60px;
	display: flex;

	img {
		user-select: none;
	}

	& > div {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	h1 {
		flex: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 4px 0 4px;
		padding-right: 10px;
	}

	section {
		float: right;
	}

	nav {
		flex: 0 0 auto;
		display: flex;
		align-items: center;

		ul {
			display: flex;
			align-items: center;
			list-style: none;
			font-size: 14px;

			li {
				display: inline-block;
				margin: 0 10px;

				&.current a {
					color: #000000;
				}
			}
		}
	}

	a {
		text-decoration: none;
	}

	.controls {
		flex: 1;
		z-index: 1;

		input {
			color: #222222;
			background-color: transparent;
			border: 1px solid transparent;
			transition: border 150ms ease-in-out;
			text-overflow: ellipsis;

			&:hover,
			&:focus {
				border: 1px solid c.$primary-color;
				text-overflow: inherit;
			}
			&:focus {
				color: #000000;
			}
		}
	}

	li.divider {
		color: #c0c0c3;
		user-select: none;
		cursor: inherit;

		&:hover {
			color: #c0c0c3;
		}
	}
}

.headerLinks {
	margin-right: 20px;
	animation: fadein 1s;

	li,
	a {
		color: #2e3d4e;
		cursor: pointer;
		font-size: 13px;
		transition: color 0.1s ease-in-out;
		text-decoration: none;

		a:hover,
		&:hover {
			color: c.$primary-color;
			text-decoration: none;
		}
	}

	.userAccount {
		display: flex;
		align-items: center;

		img {
			width: 24px;
			height: 24px;
			border-radius: 12px;
			margin-right: 6px;
		}
	}
}

.selected a {
	color: c.$primary-color;
}

div ul {
	li.logoutLink {
		margin-right: 0;

		button {
			font-size: 22px;
		}
	}
	li.localeSelector {
		margin-right: 0;
		button {
			font-size: 22px;
		}
	}
}

.title {
	h5 {
		display: flex;
		align-items: center;
		max-width: calc(100% - 40px);
	}

	.flags {
		background-image: url('./images/flags.png');
		background-repeat: no-repeat;
		background-size: 120px;
		flex: 1;
		width: 122px;
		height: 22px;
		display: inline-block;
		margin-left: 15px;
		margin-top: 2px;
	}
}

div.selectedLocale {
	background-color: c.$primary-pale-bg;
	&:hover {
		background-color: c.$primary-pale-bg;
	}
	span {
		font-weight: bold;
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
