@import url(~antd/lib/upload/style/index-pure.less);
@import '../../style/themes/index';

@icon-prefix-cls: ~'@{ant-prefix}-icon';
@btn-prefix-cls: ~'@{ant-prefix}-btn';

.icon-interaction() {
	color: @font-color-caption;
	transition: color @animation-duration-base @ease-in-out;

	&:hover {
		color: @text-color;
	}
}

// Texts
.@{upload-prefix-cls}-list {
	.@{upload-item}-name {
		font-size: @upload-item-name-font-md-size;
	}

	// list-item-info
	&-item-info {
		padding: 0 10px;
	}

	&-info {
		.@{iconfont-css-prefix}-loading,
		.@{upload-prefix-cls}-text-icon {
			.@{iconfont-css-prefix} {
				color: @text-color;
			}
		}
	}
}

// Icon Button
.@{upload-prefix-cls}-list {
	.@{upload-item}-card-actions-btn {
		font-size: @upload-item-action-md-size;
		margin-left: 8px;
		width: initial;
		padding: initial;
		height: initial;
		border: none;

		.@{icon-prefix-cls} {
			font-size: inherit;
		}
	}

	&-text {
		.@{upload-prefix-cls}-text-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: @upload-list-pic-md-size;
			height: @upload-list-pic-md-size;

			.@{icon-prefix-cls} {
				font-size: @upload-icon-size;
			}
		}
	}

	&-picture {
		.@{upload-item}-thumbnail {
			.@{icon-prefix-cls} {
				font-size: @upload-icon-size;
			}
		}
	}
}

// Text list
.@{upload-prefix-cls} {
	&-list-text {
		margin-top: 12px;
	}

	&-list-text-container {
		height: @upload-list-item-height;
		background-color: @upload-list-item-background;
		margin-bottom: 4px;
		border-radius: @border-radius-base;
		overflow: hidden;

		.@{upload-item} {
			margin-top: 0;
			height: 100%;

			&:hover {
				.@{upload-item}-info {
					background-color: initial;
				}
			}
		}

		.@{upload-item}-info {
			padding-left: @upload-list-pic-padding-lr;
		}

		.@{upload-item}-name {
			padding-left: @upload-list-pic-padding-lr;
			font-size: @upload-item-name-font-md-size;
		}

		// States
		.@{upload-item}-uploading {
			.@{upload-item}-info {
				position: relative;
				z-index: 1;
			}

			.@{upload-item}-progress {
				bottom: initial;
				top: 0;
				padding-left: 0;
				padding-right: 0;

				.@{ant-prefix}-progress-inner {
					border-radius: 0;
					background-color: @upload-list-item-background;
				}
			}

			.@{upload-item}-name {
				color: @heading-color;
			}
		}

		.@{upload-item}-error {
			background-color: @upload-list-item-background-error;

			.@{upload-item}-error-icon {
				color: @error-color;
			}
		}

		.@{upload-item}-done,
		.@{upload-item}-success {
			.@{upload-item}-name {
				color: @heading-color;
			}
		}

		.@{upload-item}-success {
			.@{upload-item}-success-icon {
				color: @success-color;
			}
		}
	}

	&-list {
		.@{upload-item}-card-actions,
		.@{upload-item}-actions {
			.@{upload-item}-card-actions-btn:hover {
				background: transparent;
				box-shadow: initial;
			}
		}
	}
}

// Error actions icon
.@{upload-prefix-cls}-list {
	.@{upload-prefix-cls}-list-item-card-actions-btn {
		.icon-interaction();

		.@{icon-prefix-cls} {
			color: inherit;
		}
	}
}

.@{upload-prefix-cls}-list-text-container,
.@{upload-prefix-cls}-list-picture-container {
	.@{upload-item}-uploading {
		.@{upload-item}-info {
			position: relative;
			z-index: 1;
		}

		.@{ant-prefix}-progress {
			bottom: initial;
			top: 0;
			padding-left: 0;
			padding-right: 0;
		}

		.@{ant-prefix}-progress-inner {
			border-radius: 0;
			background-color: @upload-list-item-background;
		}
	}
	.@{ant-prefix}-progress-inner {
		border-radius: 0;
	}
	.@{ant-prefix}-progress-status-normal .@{ant-prefix}-progress-bg {
		border-radius: 0;
		background-color: @success-color-light;
		background-image: initial !important; // To override inline style.
	}
	.@{upload-prefix-cls}-list-item-progress {
		bottom: 0;
		padding-left: 0;
	}
}

.@{upload-prefix-cls}-list {
	&-text-container:not(.@{upload-prefix-cls}-simple-container)
		&-item-uploading
		&-item-progress
		.@{ant-prefix}-progress-bg {
		border-radius: 0;
		background-color: @success-color-light;
		background-image: initial !important; // To override inline style.
	}

	// =========================== Motion ===========================

	.@{upload-prefix-cls}-animate-inline-appear,
	.@{upload-prefix-cls}-animate-inline-enter {
		animation-name: uploadAnimateInlineIn;
	}

	.@{upload-prefix-cls}-animate-inline-leave {
		animation-name: uploadAnimateInlineOut;
	}
	@keyframes uploadAnimateInlineIn {
		from {
			opacity: 0;
			width: 0;
		}
	}

	@keyframes uploadAnimateInlineOut {
		to {
			opacity: 0;
			width: 0;
		}
	}
}

@import './picture.less';
@import './picture-card.less';

// 新增success状态背景
// success状态
.@{upload-prefix-cls}-list-item.@{upload-prefix-cls}-list-item-success {
	background-color: @success-color-light;
}

// success时的icon，hover时不显示
.@{upload-prefix-cls}-list-item {
	&-card-actions &-success-icon,
	&-card-actions &-error-icon {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		transition: all @animation-duration-slow;
	}

	&-error &-card-actions-btn-remove {
		opacity: 0;
	}

	&:hover &-success-icon,
	&:hover &-error-icon {
		opacity: 0;
	}

	&:hover &-card-actions-btn-remove {
		opacity: 1;
	}
}

// Drag
.@{upload-prefix-cls}.@{upload-prefix-cls}-drag {
	// background-color: @upload-list-item-background;
	background-color: @white;

	&.@{upload-prefix-cls}-disabled {
		background-color: @upload-list-item-background-disabled;

		&:hover {
			box-shadow: initial;
		}

		p,
		span {
			color: @upload-list-item-color-disabled!important;
		}

		.@{btn-prefix-cls}-link::after {
			display: none;
		}
	}
}

@import './simple.less';
@import './size.less';

// @NOTE: DO NOT DELETE!!! A css mark to ensure the compiles css order and will be removed in the compiled output.
.remove-css-imported-after {
	content: '';
}