@font-face {
	font-family: 'iconfont';
	src: url('./../../../src/assets/iconfont/p5-iconfont.eot');
	src: url('./../../../src/assets/iconfont/p5-iconfont.eot?v=1#iefix') format('embedded-opentype'),
		url('./../../../src/assets/iconfont/p5-iconfont.ttf?v=1') format('truetype'),
		url('./../../../src/assets/iconfont/p5-iconfont.svg?v=1#iconfont') format('svg');
}
.iconfont {
	font-family: 'iconfont' !important;
	font-size: 14px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.p5-upload-box {
	.p5-upload-wrap {
		width: 100%;
		display: inline-block;
		.p5-upload-input {
			display: none;
		}
		.p5-upload-select {
			.p5-upload-btn {
				width: 150px;
				&:before {
					content: "\e828";
					margin-right: 4px;
				}
			}
		}
		.p5-upload-drop {
			width: 100%;
			// height: 100px;
			border: 1px dashed #d7dde4;
			text-align: center;
			padding: 30px 0;
			font-size: 14px;
			&:hover {
				@include brcolor;
			}
			.p5-upload-drop-icon {
				&:before {
					content: "\e82a";
					font-size: 70px;
					@include color;
				}
			}
		}
	}
}

.p5-upload-list-box {
	.p5-upload-list {
		li {
			font-size: 12px;
			padding: 4px;
			cursor: pointer;
			overflow: hidden;
			&:hover {
				background: #eee;
				@include color;
				transition: background-color 0.2s ease-in-out;
				.p5-upload-file-x {
					display: block;
				}
			}
			.p5-upload-file-x {
				display: none;
				float: right;
				padding: 1px 4px;
				&:before {
					content: '\e88c';
				}
			}
			.p5-upload-file-name {
				.p5-upload-file-icon {
					&:before {
						margin-right: 4px;
					}
					&.p5-upload-file-icon-image:before {
						content: '\e832';
					}
					&.p5-upload-file-icon-video:before {
						content: '\e82c';
					}
					&.p5-upload-file-icon-mp3:before {
						content: '\e90c';
					}
					&.p5-upload-file-icon-doc:before {
						content: '\e7ee';
					}
					&.p5-upload-file-icon-xls:before {
						content: '\e7e4';
					}
					&.p5-upload-file-icon-ppt:before {
						content: '\e7e6';
					}
				}
			}

			.p5-upload-file-percent {
				width: 100%;
				overflow: hidden;
				.p5-upload-file-percent-box {
					width: 96%;
					background: #ddd;
					display: inline-block;
					vertical-align: middle;
					border-radius: 100px;
					.p5-upload-file-percent-progress {
						height: 4px;
						width: 0;
						background: #5c9dec;
						transition: all .2s linear;
						border-radius: 100px;
					}
				}
				.p5-upload-file-percent-num {
					display: block;
					float: right;
				}
				&.p5-upload-file-percent-complete {
					.p5-upload-file-percent-progress {
						background-color: #0c6;
					}
				}
			}
		}
	}
}