@import (reference) '../../style/themes/index.less';

@progress-prefix-cls: ~'@{ant-prefix}-progress';

.gray-icon-interaction() {
	color: @cloud-gray-20;

	&:hover {
		color: @white;
	}
}

// Picture Card
.@{upload-prefix-cls} {
	&-picture-card-wrapper {
		width: initial;

		.@{progress-prefix-cls}-inner {
			background-color: transparent;
		}
	}

	&-list-picture-card &-list-picture-card-container {
		.@{upload-item} {
			background-color: @white;
			border-radius: @border-radius-base;
		}
	}
}

.@{upload-prefix-cls} {
	&&-select-picture-card {
		// background-color: @upload-list-item-background;
		background-color: @white;

		&:hover {
			border: 1px dashed @primary-color;
			box-shadow: none !important;
		}

		.@{upload-prefix-cls} {
			color: @primary-color;
		}
	}

	// Select card Disabled
	&&-select-picture-card&-disabled {
		background-color: @upload-list-item-background-disabled;
		border-style: dashed;
		// border: 0px;

		&:hover {
			box-shadow: initial;
		}

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

	&-list-picture-card {
		.@{upload-item}-card-actions-btn {
			.gray-icon-interaction();
		}

		.@{upload-item}-actions {
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			transform: initial;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16px;

			a {
				display: block;
				height: @upload-icon-size;
				line-height: @upload-icon-size;
			}

			.@{upload-item}-card-actions-btn {
				width: fit-content;
				font-size: @upload-item-action-md-size;
				border: initial;
				padding: initial;
				height: initial;
				margin-left: 0;

				.@{ant-prefix}-icon-sm {
					font-size: @upload-item-action-md-size;
				}
			}
		}

		.@{upload-item}-view-icon {
			opacity: 1;

			.gray-icon-interaction();
		}
	}

	// States
	&-list-picture-card {
		.@{upload-item} {
			padding: 0;
		}

		.@{upload-item}:not(.@{upload-item}-uploading):hover {
			.@{upload-item}-info {
				border-radius: @border-radius-base;
			}
		}

		.@{upload-item}-info {
			height: 100%;
			&:before {
				background-color: rgba(0, 0, 0, 0.5);
			}
		}

		.@{upload-item}.@{upload-item}-uploading {
			border: none;
			overflow: hidden;

			.@{upload-item}-info {
				height: 100%;
			}
			.@{upload-item}-actions {
				.@{upload-item}-card-actions-btn {
					width: calc(100% - @border-width-base * 2);
					background: #fff;

					span {
						font-weight: 400;
						font-size: 12px;
						color: #1b58f4;
						letter-spacing: 0.4px;
					}
				}
			}

			.@{upload-item}-progress {
				position: absolute;
				bottom: 0;
				font-size: 0;
				width: 100%;
			}

			.@{upload-item}-progress-inner {
				background: transparent;
			}

			.@{upload-item}-thumbnail {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: @font-size-sm;
				color: @text-color;
				border: @border-width-base dashed @border-color-base;
			}

			.@{ant-prefix}-progress,
			.@{ant-prefix}-progress-outer {
				font-size: 0;
			}

			.@{ant-prefix}-progress-inner,
			.@{ant-prefix}-progress-bg {
				border-radius: 4px;
				border-top-left-radius: initial;
				border-bottom-left-radius: initial;
			}
		}

		.@{upload-item}.@{upload-item}-done {
			padding: 0;
			border: none;
			overflow: hidden;
		}

		.@{upload-item}.@{upload-item}-error {
			border: 0;
			&:before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px @danger-color dashed;
				border-radius: @border-radius-base;
			}

			.@{upload-item}-thumbnail {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

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

			.@{upload-item}-name {
				margin-top: 0;
				display: initial;
			}
		}
	}
}