.cl-upload-list {
	display: flex;
	flex-wrap: wrap;

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

		.cl-upload__add {
			font-size: 50rpx;
			color: #8c939d;
		}

		&__target {
			height: 100%;
			width: 100%;
			border-radius: 10rpx;
		}

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

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

	&.is-disabled {
		.cl-upload {
			background-color: #f5f7fa;

			.cl-upload__add {
				transform: rotate(45deg);
			}
		}
	}
}