@import "ansyn/less/common";

@number-of-menu-item: 8;

div.menu-wrapper {
	height: 100%;
	display: flex;
	position: relative;

	.menu:not(.expanded), .container {
		box-shadow: 0 0 10px black;
	}

	&.collapsed {
		div.menu {
			position: absolute;
			transform: translateX(100%);

			.menu-content {
				opacity: .5;
			}

			div.menu-btn i {
				opacity: 1;
				font-size: 20px;
			}
		}

		div.container {
			display: none;
		}
	}

	div.menu {
		position: relative;
		background: @background-color-1;
		flex-direction: column;
		display: flex;
		z-index: @z-index-menu;
		width: @menu-width;
		height: 100%;
		transition: transform .5s;

		&.expanded {
			button.hide-menu {
				transition: 0s;
				transform: translateX(0);
				visibility: hidden;

				i {
					display: none;
				}
			}
		}

		div.menu-content {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;

			div.menu-items {
				display: flex;
				flex: 1;
				flex-direction: column;

				.bottom {
					margin-top: auto;
				}
				.bottom ~ .bottom {
					margin-top: unset;
				}
			}

			div.menu-btn {
				position: relative;
				text-align: center;
				color: white;
				text-decoration: none;
				padding: 14px 0;
				cursor: pointer;
				font-size: 0.9rem;

				i {
					display: block;
					font-size: 3em;
				}

				span.badge {
					position: absolute;
					background: @application-secondary-color;
					right: 20px;
					top: 10px;
					height: 21px;
					font-size: 14px;
					border-radius: 40%;

					&.count-badge {
						min-width: 30px;
						border-radius: 40%;
						padding-top: 2px;
						padding-right: 2px;
						padding-left: 2px;
					}

					&.bottom {
						width: 10px;
						height: 10px;
					}
				}

				img {
					margin: 0 auto 5px auto;
					display: block;
				}

				&:hover {
					background-color: @background-color-3;
				}

				&.active {
					background-color: @application-primary-color;
				}

				&.draw-user-attention {
					background-color: #3d1a1a;
				}

				@media screen and (max-height: 700px) {
					i {
						font-size: calc(~"((100vh - 94px) / @{number-of-menu-item}) - 45px");
					}
				}
			}

			div.logo {
				width: 100%;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 5px;

				a.forkMe {
					margin-bottom: 15px;
				}

				div.mode {
					width: 80%;
					margin-bottom: 5px;
				}

				img {
					cursor: pointer;
				}

			}
		}
	}

	div.container {
		position: absolute;
		top: @status-bar-height;
		z-index: @z-index-menu-container;
		height: calc(100% - @status-bar-height - @timeline-area-height);
		background: fade(@background-color-3, 95%);

		div.template {
			height: calc(100vh - @status-bar-height - @timeline-area-height - 1px);
			border-bottom: 1px solid #ffffff36;
		}

		&.pinned {
			position: relative;
			right: 0;
			background: @background-color-3;
		}

		button.close {
			position: absolute;
			right: 0;
			color: white;
			border: none;
			background: transparent;
			cursor: pointer;
			outline: none;
			z-index: @z-index-menu-container-button;

			&:hover {
				color: #2e2d46;
			}
		}

		button.pin {
			position: absolute;
			left: 15px;
			top: 15px;
			color: white;
			border: none;
			background: transparent;
			cursor: pointer;
			outline: none;
			z-index: @z-index-menu-container-button;
			box-sizing: border-box;
		}
	}

	div.show-menu {
		width: 100%;
	}
}

@media screen and (max-width: 1400px) {
	.pin {
		display: none;
	}
}

button.hide-menu {
	position: absolute;
	left: 0;
	transform: translateX(-100%);
	top: calc(~'50% - 110px');
	height: 60px;
	background: @background-color-1;
	border: none;
	color: white;
	box-shadow: 2px 0 4px -2px black;
	outline: none;
	visibility: visible;
	transition: .5s;
	z-index: 4000;

	&:hover {
		background-color: @background-color-3;
	}
}

@keyframes collapsed_ltr {
	from {
		transform: scale(1) translateX(100px);
	}
	to {
		transform: scale(1) translateX(0);
	}
}

@keyframes unCollapsed_ltr {
	from {
		transform: scale(1.2) translateX(-100px);
	}
	to {
		transform: scale(1) translateX(0);
	}
}

@keyframes collapsed_rtl {
	from {
		transform: scale(1) translateX(-100px);
	}
	to {
		transform: scale(1) translateX(0);
	}
}

@keyframes unCollapsed_rtl {
	from {
		transform: scale(1.2) translateX(100px);
	}
	to {
		transform: scale(1) translateX(0);
	}
}

@keyframes pinned_ltr {
	from {
		transform: scale(1.1) translateX(-100px);
	}
	to {
		transform: scale(1) translateX(0);
	}
}

@keyframes unPinned_ltr {
	from {
		transform: scale(1) translateX(200px);
	}
	to {
		transform: scale(1) translateX(0);
	}
}

@keyframes pinned_rtl {
	from {
		transform: scale(1.1) translateX(100px);
	}
	to {
		transform: scale(1) translateX(0);
	}
}

@keyframes unPinned_rtl {
	from {
		transform: scale(1) translateX(-200px);
	}
	to {
		transform: scale(1) translateX(0);
	}
}
