/* Sidebar */
.ple-side {
	&__wrap {
		position: absolute;
		z-index: 100;
		right: 0;
		top: 0;
		bottom: 0;
		width: $sidebar-width;
		padding: 0;
		background: $col-key;
		-webkit-transform: translateX($sidebar-width);
		transform: translateX($sidebar-width);
		-webkit-transition: -webkit-transform 1s ease-out;
		transition: transform .3s ease-out;
		&-show {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}
	&__toggle {
		position: absolute;
		left: -25px;
		top: 20px;
		z-index: 10;
		padding: 10px 5px;
		margin: 0;
		border: none;
		cursor: pointer;
		background: transparent;
		outline: 0;
		> span {
			display: block;
			width: 20px;
			height: 70px;
			background: #4e4e4e;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
			box-shadow: inset -1px 0 6px rgba(0,0,0,.4);
			> i {
				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
			}
		}

		&:active {
			> span {
				background: mix(#4e4e4e, #000, 80%);
			}
		}
	}
	&__background {
		position: absolute;
		left: 0;
		right: 20px;
		top: 0;
		bottom: 0;
	}
	&-active &__toggle i {
		width: 7px;
		height: 12px;
		background-position: -112px 0;
		&.ple-abs {
			margin-left: -4px;
			margin-top: -6px;
		}
	}

	.ple-sideNavigation {
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		top: 30px;
		&__wrap {
			margin: 0 15px;
			border-radius: 3px;
			background: #444;
			overflow: hidden;
			&:after {
				content: '';
				display: block;
				clear: both;
			}
		}
		button, span {
			margin: 0;
			padding: 0;
			position: relative;
			float: left;
			width: 25%;
			height: 36px;
			border-width: 0 0 0 1px;
			border-style: solid;
			border-color: #626164;
			border-color: rgba(255,255,255,.3);
			background: none;
			cursor: pointer;
			overflow: hidden;
			outline: 0;
			border-radius: 0;
			&:first-child {
				border-width: 0;
			}
		}
		button {
			&:active {
				background: mix(#444, #000, 80%);
			}
		}
		span {
			&:active {
				background: mix(#444, #000, 80%);
			}
		}
		input[type=file] {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;
			width: 100%;
			height: 100%;
			opacity: 0;
			outline: none;
			white-space: nowrap;
			cursor: pointer;
			-webkit-user-select: none;
			&::-webkit-file-upload-button {
				visibility: hidden;
			}
		}
		i {
			display: block;
			position: absolute;
			left: 50%;
			top: 50%;
		}
	}
	.ple-sideItems {
		$item-height: 63px;
		height: 100%;
		margin: 0;
		padding: 75px 0 0;
		&__wrap {
			height: 100%;
			padding: 0 10px 20px;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			background: $col-key;
		}
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: -webkit-flex;
			display: flex;
			flex-flow: row wrap;
		}
		li {
			position: relative;
			width: 33.3333%;
			padding: 5px;
		}
		&__loading {}
		&__progress {
			position: relative;
			width: 100%;
			height: $item-height;
			background: #444;
		}
		&__bar {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background: $col-active;
		}
		&__percent {
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			margin-top: -7px;
			font-size: 11px;
			color: #fff;
			text-align: center;
			line-height: 14px;
		}
		span {
			position: relative;
			display: block;
			margin: 0 auto;
			padding: 0;
			border: none;
			width: 100%;
			height: $item-height;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-color: #fff;
			cursor: pointer;
			text-indent: -9999px;
			outline: none;
			touch-action: pan-x;
			&.ple-sideItems__item-active {
				&:after {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					border: 4px solid $col-active;
				}
			}
		}
	}

	/* placeholder */
	&__placeholder {
		display: block;
		position: absolute;
		z-index: 10000;
		margin: 0;
		padding: 0;
		left: -999px;
		top: -999px;
		opacity: .8;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-color: #fff;
		text-indent: -9999px;
		cursor: pointer;
		border: none;
	}
}