@menu-spacing: 3 * @spacing;
@menu-spacing-mobile: 1.5 * @spacing;

.AppMenu {
	background-color: @light-gray-bg;

	width: @content-margin-min;
	@media (min-width: 2401px) {
		width: @content-margin-max;
	}
	@media (min-width: 1100px) and (max-width: 2400px) {
		width: @content-margin;
	}

	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
		0px 1px 18px 0px rgba(0, 0, 0, 0.12);
	transition: all 0.5s ease;
	z-index: 0;
	overflow-x: hidden;
	overflow-y: auto;

	&:hover {
		z-index: 2;

		width: @menu-size;
		@media (min-width: 2401px) {
			width: @content-margin-max;
		}
		@media (min-width: 1100px) and (max-width: 2400px) {
			width: @content-margin-max;
		}
	}
}
.AppMenu__container {
	width: @menu-size;
	@media (min-width: 2401px) {
		width: @content-margin-max;
	}
	@media (min-width: 1100px) and (max-width: 2400px) {
		width: @content-margin-max;
	}
	padding: 0 @menu-spacing @menu-spacing @spacing * 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 568px;
}

.touch .AppMenu {
	width: @menu-size;
	opacity: 0;
	z-index: 0;
	transition: z-index 0s ease 0s, opacity 0s ease 0.3s;
}
.touch .AppMenu__container {
	padding: 0 @menu-spacing-mobile;
}
.touch .AppMenu.open {
	display: flex;
	z-index: 3;
	opacity: 1;
	transition: z-index 0s ease 0.3s;
}
@media @tablet, @phone {
	.AppMenu,
	.touch .AppMenu {
		width: @menu-size;
		opacity: 0;
		z-index: 0;
		transition: z-index 0s ease 0s, opacity 0s ease 0.3s;
	}
	.AppMenu__container,
	.tocuh .AppMenu__container {
		padding: 0 @menu-spacing-mobile;
	}
	.AppMenu.open,
	.touch .AppMenu.open {
		display: flex;
		z-index: 3;
		opacity: 1;
		transition: z-index 0s ease 0.3s;
	}
}

// NAV
.MenNav {
	margin-top: @menu-spacing;
	margin-bottom: @menu-spacing;
	@media @tablet, @phone {
		margin-top: @menu-spacing-mobile;
		margin-bottom: @menu-spacing-mobile;
	}
}
.MenuNavItem a,
.MenuTitle--small {
	margin: 0px;
	font-size: @medium-font-size;

	&:hover,
	&.active {
		color: @hovered-color;
	}
}
.MenuTitle {
	display: flex;
	flex-direction: column;
	&:hover {
		color: @hovered-color;
	}
	&.reverted {
		flex-flow: column-reverse;
	}
}

.MenuTitle--big h1.big-text {
	color: inherit;
	margin: 0;
	font-size: @big-font-size;
	transform: translateY(-2px);
}
.MenuTitle--small {
	color: inherit;
	margin-top: -9px;
}

// TAGS
.MenuBody {
	overflow: auto;
}

.Tag button {
	background-color: transparent;
	border: 0.5px solid black;
	border-radius: 2px;
	margin: 3px;
	padding: 4px 8px;
	cursor: pointer;
	&:before {
		content: '#';
	}
	&:hover,
	&.selected {
		background-color: @accent-color;
	}
	&:focus {
		outline: none;
	}
}

.TagWithoutHash button {
	background-color: transparent;
	border: 0.5px solid black;
	border-radius: 2px;
	margin: 3px;
	padding: 4px 8px;
	cursor: pointer;
	&:hover,
	&.selected {
		background-color: @accent-color;
	}
	&:focus {
		outline: none;
	}
}
.touch .Tag button {
	padding: 8px 12px;
	&:hover {
		background-color: transparent;
	}
}
.touch .Tag button.selected {
	&:hover {
		background-color: @accent-color;
	}
}

.TagGroup {
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
}

// FOOTER
.MenuFooter {
	margin-top: auto;
	padding-top: @menu-spacing;
	@media @tablet, @phone {
		padding-top: @menu-spacing-mobile;
	}
}
.MenuFooter-museum-link {
	display: flex;
	align-items: flex-end;
	line-height: 0.9;

	&:hover {
		opacity: 0.6;
	}

	img {
		max-width: 85px;
		margin-right: 15px;
	}
}
.MenuFooter hr {
	margin-top: @spacing * 1.5;
	height: 5px;
	background: black;
	border: none;
}
.LangSelector {
	margin-top: @spacing * 1.5;
}
.MenuFooter span {
	margin-right: 1.5 * @spacing;
	cursor: pointer;
	&:hover,
	&.activeLang {
		opacity: 0.5;
	}
}

.SitesTabGroup {
	display: flex;
	flex-wrap: wrap;
}

.SitesTab {
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;

	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 2px 20px 2px 20px;
	display: inline;
	margin-bottom: 30px;
}

.SitesTab:nth-child(1n+2) {
	border-left: 0;
}

.SitesTab.active {
	background-color: #ffe600;
}