@charset "utf-8";

/********** HEADER MENU **********/

.Header {
	display: block;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(1px);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	transition: transform 0.5s;

	&.hide {
		transform: translateY(-100%);
	}

	.HeaderFrame {
		display: grid;
		justify-content: center;
		align-items: center;
		grid-template-columns: 2fr 1fr 2fr;
		width: 100%;
		height: 56px;
		max-width: 960px;
		margin: 0 auto;

		.HeaderLink {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 22px;
			padding: 16px 0 14px 0;

			.HeaderImg {
				display: block;
				height: 22px;
			}
		}

		.HeaderMenu {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px 0 0;
			width: 70px;
			margin-left: auto;

			@media (min-width: 600px) {
				padding: 0 16px 0 0;
				width: 76px;
			}

			.HeaderMenuItem {
				display: flex;
				justify-content: end;
				align-items: center;
				height: 32px;
				width: 32px;

				&.Selected {
					.HeaderMenuItemIcon {
						&.Upload {
							background-image: url('/img/menu_upload_selected.svg');
						}

						&.Me {
							background-image: url('/img/menu_account_selected.svg');
						}
					}
				}

				.HeaderMenuItemIcon {
					display: block;
					width: 21px;
					height: 21px;
					margin: 0 auto;
					background-position: 50% 50%;
					background-size: cover;
					background-repeat: no-repeat;

					&.Upload {
						background-image: url('/img/menu_upload.svg');
					}

					&.Me {
						background-image: url('/img/menu_account.svg');
					}
				}
			}
		}

		.HeaderCmd {
			display: flex;
			justify-content: end;
			align-items: center;
			height: 32px;
			padding: 0 10px 0 0;
			margin-left: auto;

			.HeaderLogin {
				min-width: 80px;
				font-size: 16px;
				padding: 0 10px;

				.XLogo {
					display: block;
					height: 16px;
					margin-right: 3px;
				}
			}
		}
	}
}