@import "variables";
.sidebar-menu {
	//position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	padding: 12px;
	font-size: 13px;
	.menu {
		position: relative;
		margin: 0 -12px;
		padding: 0;
		& + .menu { margin-top: 12px; }

		.menu__head {
			margin-bottom: 4px;
			padding-left: 12px;
			padding-right: 12px;
			font-weight: bold;
		}
		.menu__body {
			position: relative;
			margin: 0;
			padding: 0;
			list-style: none;
			.menu-item-highlight {
				background: rgba(255,194,14,.1);
				border-top: 1px solid #FFC20E;
				border-bottom: 1px solid #FFC20E;
				min-height: 20px;
			}
			.menu-item {
				position: relative;
				overflow: hidden;
				margin: 0;
				padding: 1px 0 1px 28px;
				line-height: normal;
				&:not(:first-child){
					margin-top: 3px;
				}
				&.active {
					background: #FFC20E;
				}
				&:hover {
					.menu-favorite-toggle {
						opacity: 1;
					}
				}
			}
			a, .menu-link {
				position: relative;
				overflow: hidden;
				display: inline-block;
				border-bottom-color: transparent;
				color: #000;
				white-space: nowrap;
				//text-overflow: ellipsis;
				&:hover {
					border-bottom-color: #0D61AB;
					color: #0D61AB;
				}
			}
		}

		.menu-favorite-move {
			position: absolute; top: 3px; left: 3px;
			display: block;
			width: 6px;
			height: 10px;
			&:before {
				content: '';
				background: #9b9b9b;
				position: absolute; top: 0; left: 0;
				display: block;
				width: 2px; height: 2px;
				@include border-radius(50%);
				box-shadow: 0 4px 0 #9b9b9b, 0 8px 0 #9b9b9b;
			}
			&:after {
				content: '';
				background: #9b9b9b;
				position: absolute; top: 0; right: 0;
				display: block;
				width: 2px; height: 2px;
				@include border-radius(50%);
				box-shadow: 0 4px 0 #9b9b9b, 0 8px 0 #9b9b9b;
			}
			&:hover {
				cursor: pointer;
				&:before {
					background: #0D61AB;
					box-shadow: 0 4px 0 #0D61AB, 0 8px 0 #0D61AB;
				}
				&:after {
					background: #0D61AB;
					box-shadow: 0 4px 0 #0D61AB, 0 8px 0 #0D61AB;
				}
			}
		}
		.menu-favorite-toggle {
			position: absolute; top: 2px; left: 12px;
			overflow: hidden;
			display: block; width: 12px; height: 12px;
			img {
				position: absolute; top: 0; left: 0;
				display: block;
				width: 100%;
			}
			&:hover {
				cursor: pointer;
			}
			&.active {
				opacity: 1;
				img {
					top: auto;
					bottom: 0;
				}
			}
		}
	}

	.sidebar-menu__favorite {
		margin-bottom: 12px;
		.favorite-empty {
			position: relative;
			&:before {
				content: '';
				background: rgba(0,0,0,.1);
				position: absolute; top: 100%; left: -12px; right: -12px;
				height: 1px;
			}
			.empty__head {
				margin-bottom: 4px;
				font-weight: bold;
			}
			.empty__body {
				padding-bottom: 4px;
				font-size: 12px;
				line-height: 1.4;
				.tip {
					display: flex;
					align-items: center;
					.tip__side {
						img {
							display: block;
							height: 48px;
						}
					}
					.tip__body {
						color: #0D61AB;
					}
				}
			}
		}
		.menu {
			display: none;
			.menu-favorite-toggle {
				opacity: 1;
			}
		}
		&.in {
			.favorite-empty {
				display: none;
			}
			.menu {
				display: block;
			}
		}
	}
	.sidebar-menu__body {
		.menu {
			.menu-favorite-toggle:not(.active) {
				opacity: 0;
			}
		}
	}
}

.sortable-fake {
	background: rgba(255,194,14,.5);
	border: 1px solid #FFC20E;
	position: absolute !important;
	z-index: 999;
}