$i_c: rgba(#000, 0.3);
$i_w: 42px;
$i_h: 42px;
$c_succ: #4a7;
$c_warn: #cc0;
$c_error: #d10;
$c_info: #07d;
@mixin bs1 {
	box-shadow: 0 1px 3px 0 rgba(#000, 0.12);
}
@mixin bs2 {
	box-shadow: 0 2px 6px 0 rgba(#000, 0.18);
}
@mixin bs3 {
	box-shadow: 0 1px 3px 0 rgba(#000, 0.23);
}
@keyframes vicp_progress {
	0% {
		background-position-y: 0;
	}

	100% {
		background-position-y: 40px;
	}
}
@keyframes vicp {
	0% {
		opacity: 0;
		transform: scale(0) translatey(-60px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translatey(0);
	}
}

.vue-image-crop-upload {
	position: fixed;
	display: block;
	box-sizing: border-box;
	z-index: 10000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(#000, 0.65);
	-webkit-tap-highlight-color: transparent;
	-moz-tap-highlight-color: transparent;

	.vicp-wrap {
		@include bs3;
		position: fixed;
		display: block;
		box-sizing: border-box;
		z-index: 10000;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 600px;
		height: 330px;
		padding: 25px;
		background-color: #fff;
		border-radius: 2px;
		animation: vicp 0.12s ease-in;

		.vicp-close {
			position: absolute;
			right: -30px;
			top: -30px;

			.vicp-icon4 {
				position: relative;
				display: block;
				width: 30px;
				height: 30px;
				cursor: pointer;
				transition: transform 0.18s;
				transform: rotate(0);

				&::after,
				&::before {
					@include bs3;
					content: '';
					position: absolute;
					top: 12px;
					left: 4px;
					width: 20px;
					height: 3px;
					transform: rotate(45deg);
					background-color: #fff;
				}

				&::after {
					transform: rotate(-45deg);
				}

				&:hover {
					transform: rotate(90deg);
				}
			}
		}

		.vicp-step1 {
			.vicp-drop-area {
				position: relative;
				box-sizing: border-box;
				padding: 35px;
				height: 170px;
				background-color: rgba(0, 0, 0, 0.03);
				text-align: center;
				border: 1px dashed rgba(0, 0, 0, 0.08);
				overflow: hidden;

				// 上传图标
				.vicp-icon1 {
					display: block;
					margin: 0 auto 6px;
					width: $i_w;
					height: $i_h;
					overflow: hidden;

					.vicp-icon1-arrow {
						display: block;
						margin: 0 auto;
						width: 0;
						height: 0;
						border-bottom: $i_h * 0.35 solid $i_c;
						border-left: $i_h * 0.35 solid transparent;
						border-right: $i_h * 0.35 solid transparent;
					}

					.vicp-icon1-body {
						display: block;
						width: $i_w * 0.3;
						height: $i_h * 0.35;
						margin: 0 auto;
						background-color: $i_c;
					}

					.vicp-icon1-bottom {
						box-sizing: border-box;
						display: block;
						height: $i_h * 0.3;
						border: 6px solid $i_c;
						border-top: none;
					}
				}

				.vicp-hint {
					display: block;
					padding: 15px;
					font-size: 14px;
					color: #666;
					line-height: 30px;
				}

				.vicp-no-supported-hint {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					padding: 30px;
					width: 100%;
					height: 60px;
					line-height: 30px;
					background-color: #eee;
					text-align: center;
					color: #666;
					font-size: 14px;
				}

				&:hover {
					cursor: pointer;
					border-color: rgba(0, 0, 0, 0.1);
					background-color: rgba(0, 0, 0, 0.05);
				}
			}
		}

		.vicp-step2 {
			.vicp-crop {
				overflow: hidden;

				.vicp-crop-left {
					float: left;

					.vicp-img-container {
						position: relative;
						display: block;
						width: 240px;
						height: 180px;
						background-color: #e5e5e0;
						overflow: hidden;

						.vicp-img {
							position: absolute;
							display: block;
							cursor: move;
							user-select: none;
						}

						.vicp-img-shade {
							@include bs2;
							position: absolute;
							background-color: rgba(#f1f2f3, 0.8);

							&.vicp-img-shade-1 {
								top: 0;
								left: 0;
							}

							&.vicp-img-shade-2 {
								bottom: 0;
								right: 0;
							}
						}
					}

					.vicp-rotate {
						position: relative;
						width: 240px;
						height: 18px;

						i {
							display: block;
							width: 18px;
							height: 18px;
							border-radius: 100%;
							line-height: 18px;
							text-align: center;
							font-size: 12px;
							font-weight: bold;
							background-color: rgba(#000, 0.08);
							color: #fff;
							overflow: hidden;

							&:hover {
								@include bs1;
								cursor: pointer;
								background-color: rgba(#000, 0.14);
							}

							&:first-child {
								float: left;
							}

							&:last-child {
								float: right;
							}
						}
					}

					.vicp-range {
						position: relative;
						margin: 30px 0 10px 0;
						width: 240px;
						height: 18px;

						.vicp-icon5,
						.vicp-icon6 {
							position: absolute;
							top: 0;
							width: 18px;
							height: 18px;
							border-radius: 100%;
							background-color: rgba(#000, 0.08);

							&:hover {
								@include bs1;
								cursor: pointer;
								background-color: rgba(#000, 0.14);
							}
						}

						// 减号
						.vicp-icon5 {
							left: 0;

							&::before {
								position: absolute;
								content: '';
								display: block;
								left: 3px;
								top: 8px;
								width: 12px;
								height: 2px;
								background-color: #fff;
							}
						}
						// 加号
						.vicp-icon6 {
							right: 0;

							&::before {
								position: absolute;
								content: '';
								display: block;
								left: 3px;
								top: 8px;
								width: 12px;
								height: 2px;
								background-color: #fff;
							}

							&::after {
								position: absolute;
								content: '';
								display: block;
								top: 3px;
								left: 8px;
								width: 2px;
								height: 12px;
								background-color: #fff;
							}
						}

						input[type=range] {
							display: block;
							padding-top: 5px;
							margin: 0 auto;
							width: 180px;
							height: 8px;
							vertical-align: top;
							background: transparent;
							appearance: none;
							cursor: pointer;

							&:focus {
								outline: none;
							}

							/* 滑块
							 ---------------------------------------------------------------*/
							&::-webkit-slider-thumb {
								@include bs2;
								appearance: none;
								margin-top: -3px;
								width: 12px;
								height: 12px;
								background-color: lighten($c_succ, 10);
								border-radius: 100%;
								border: none;
								transition: 0.2s;
							}

							&::-moz-range-thumb {
								@include bs2;
								appearance: none;
								width: 12px;
								height: 12px;
								background-color: lighten($c_succ, 10);
								border-radius: 100%;
								border: none;
								transition: 0.2s;
							}

							&::-ms-thumb {
								@include bs2;
								appearance: none;
								width: 12px;
								height: 12px;
								background-color: lighten($c_succ, 10);
								border: none;
								border-radius: 100%;
								transition: 0.2s;
							}

							&:active {
								&::-moz-range-thumb {
									@include bs3;
									width: 14px;
									height: 14px;
								}

								&::-ms-thumb {
									@include bs3;
									width: 14px;
									height: 14px;
								}

								&::-webkit-slider-thumb {
									@include bs3;
									margin-top: -4px;
									width: 14px;
									height: 14px;
								}
							}

							/* 轨道
							 ---------------------------------------------------------------*/
							&::-webkit-slider-runnable-track {
								@include bs1;
								width: 100%;
								height: 6px;
								cursor: pointer;
								border-radius: 2px;
								border: none;
								background-color: rgba($c_succ, 0.3);
							}

							&::-moz-range-track {
								@include bs1;
								width: 100%;
								height: 6px;
								cursor: pointer;
								border-radius: 2px;
								border: none;
								background-color: rgba($c_succ, 0.3);
							}

							&::-ms-track {
								@include bs1;
								width: 100%;
								cursor: pointer;
								background: transparent;
								border-color: transparent;
								color: transparent;
								height: 6px;
								border-radius: 2px;
								border: none;
							}

							&::-ms-fill-lower {
								background-color: rgba($c_succ, 0.3);
							}

							&::-ms-fill-upper {
								background-color: rgba($c_succ, 0.15);
							}

							&:focus {
								&::-webkit-slider-runnable-track {
									background-color: rgba($c_succ, 0.5);
								}

								&::-moz-range-track {
									background-color: rgba($c_succ, 0.5);
								}

								&::-ms-fill-lower {
									background-color: rgba($c_succ, 0.45);
								}

								&::-ms-fill-upper {
									background-color: rgba($c_succ, 0.25);
								}
							}
						}
					}
				}

				.vicp-crop-right {
					float: right;

					.vicp-preview {
						height: 150px;
						overflow: hidden;

						.vicp-preview-item {
							position: relative;
							padding: 5px;
							width: 100px;
							height: 100px;
							float: left;
							margin-right: 16px;

							span {
								position: absolute;
								bottom: -30px;
								width: 100%;
								font-size: 14px;
								color: #bbb;
								display: block;
								text-align: center;
							}

							img {
								position: absolute;
								display: block;
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								margin: auto;
								padding: 3px;
								background-color: #fff;
								border: 1px solid rgba(#000, 0.15);
								overflow: hidden;
								user-select: none;
							}

							&.vicp-preview-item-circle {
								margin-right: 0;

								img {
									border-radius: 100%;
								}
							}
						}
					}
				}
			}
		}

		.vicp-step3 {
			.vicp-upload {
				position: relative;
				box-sizing: border-box;
				padding: 35px;
				height: 170px;
				background-color: rgba(0, 0, 0, 0.03);
				text-align: center;
				border: 1px dashed #ddd;

				.vicp-loading {
					display: block;
					padding: 15px;
					font-size: 16px;
					color: #999;
					line-height: 30px;
				}

				.vicp-progress-wrap {
					margin-top: 12px;
					background-color: rgba(#000, 0.08);
					border-radius: 3px;

					.vicp-progress {
						position: relative;
						display: block;
						height: 5px;
						border-radius: 3px;
						background-color: $c_succ;
						box-shadow: 0 2px 6px 0 rgba($c_succ, 0.3);
						transition: width 0.15s linear;
						background-image: linear-gradient(-45deg, rgba(#fff, 0.2) 25%, transparent 25%, transparent 50%, rgba(#fff, 0.2) 50%, rgba(#fff, 0.2) 75%, transparent 75%, transparent);
						background-size: 40px 40px;
						animation: vicp_progress 0.5s linear infinite;

						&::after {
							content: '';
							position: absolute;
							display: block;
							top: -3px;
							right: -3px;
							width: 9px;
							height: 9px;
							border: 1px solid rgba(#f5f6f7, 0.7);
							box-shadow: 0 1px 4px 0 rgba($c_succ, 0.7);
							border-radius: 100%;
							background-color: $c_succ;
						}
					}
				}

				.vicp-error,
				.vicp-success {
					height: 100px;
					line-height: 100px;
				}
			}
		}

		.vicp-operate {
			position: absolute;
			right: 20px;
			bottom: 20px;

			a {
				position: relative;
				float: left;
				display: block;
				margin-left: 10px;
				width: 100px;
				height: 36px;
				line-height: 36px;
				text-align: center;
				cursor: pointer;
				font-size: 14px;
				color: $c_succ;
				border-radius: 2px;
				overflow: hidden;
				user-select: none;

				&:hover {
					background-color: rgba(#000, 0.03);
				}
			}
		}

		.vicp-error,
		.vicp-success {
			display: block;
			font-size: 14px;
			line-height: 24px;
			height: 24px;
			color: $c_error;
			text-align: center;
			vertical-align: top;
		}

		.vicp-success {
			color: $c_succ;
		}

		// 成功图标
		.vicp-icon3 {
			position: relative;
			display: inline-block;
			width: 20px;
			height: 20px;
			top: 4px;

			&::after {
				position: absolute;
				top: 3px;
				left: 6px;
				width: 6px;
				height: 10px;
				border-width: 0 2px 2px 0;
				border-color: $c_succ;
				border-style: solid;
				transform: rotate(45deg);
				content: '';
			}
		}

		// 错误图标
		.vicp-icon2 {
			position: relative;
			display: inline-block;
			width: 20px;
			height: 20px;
			top: 4px;

			&::after,
			&::before {
				content: '';
				position: absolute;
				top: 9px;
				left: 4px;
				width: 13px;
				height: 2px;
				background-color: $c_error;
				transform: rotate(45deg);
			}

			&::after {
				transform: rotate(-45deg);
			}
		}
	}
}

// 波纹效果
.e-ripple {
	position: absolute;
	border-radius: 100%;
	background-color: rgba(0, 0, 0, 0.15);
	background-clip: padding-box;
	pointer-events: none;
	user-select: none;
	transform: scale(0);
	opacity: 1;

	&.z-active {
		opacity: 0;
		transform: scale(2);
		transition: opacity 1.2s ease-out, transform 0.6s ease-out;
	}
}