.cl-upload-list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -20rpx;

	.cl-upload {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: $cl-upload-radius;
		border-width: $cl-border-width;
		border-style: dashed;
		border-color: $cl-border-color;
		box-sizing: border-box;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		&__add {
			font-size: 50rpx;
			color: #8c939d;
		}

		&__target {
			height: 100%;
			width: 100%;
			border-radius: $cl-upload-radius;
		}

		&__remove {
			position: absolute;
			right: 0;
			top: 0;
			color: $cl-color-error;
			z-index: 1;
			line-height: normal;
			font-size: 30rpx;
			padding: 10rpx;
		}

		&__progress {
			position: absolute;
			left: 10rpx;
			bottom: 6rpx;
			width: calc(100% - 10rpx);
			z-index: 2;
		}

		&__demo {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: $cl-color-placeholder;

			.cl-icon-camera-fill {
				font-size: 70rpx;
			}

			.text {
				font-size: 24rpx;
				line-height: normal;
				margin-top: 10rpx;
			}
		}
	}

	&:not(.is-disabled) {
		.cl-upload {
			&:active {
				border-color: $cl-color-primary;
				&__add {
					color: $cl-color-primary;
				}
			}
		}
	}

	&.is-disabled {
		.cl-upload {
			background-color: $cl-color-disabled-bg;

			&__add {
				transform: rotate(45deg);
			}
		}
	}
}