@import "../../variable.less";
@import "../../mixins/index.less";
@import "./var.less";

.@{--css-prefix}-uploader-picker {
	position: relative;
	width: 100%;
	box-sizing: border-box;

	/* elements */
	&__flex-box {
		display: flex;
		padding: var(--spacing-h-sm);
		box-sizing: border-box;
	}

	&__flex-item {
		position: relative;
		margin-left: var(--spacing-h-lg);
		flex: 1;
		height: 100%;
		box-sizing: border-box;

		&:first-child{
			margin-left: 0;
		}
		&::after {
			content: '';
			display: block;
			padding-bottom: 100%;
		}
	}

	&__item {
		position: absolute;
		top: 50%;
		width: 100%;
		height: 100%;
		border-radius: var(--border-radius-hg);
		transform: translateY(-50%);
	}

	&__choose-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border: 1PX dashed var(--color-border-light);

		.text {
			font-size: var(--font-size-sm);
			margin-top: var(--spacing-v-sm);
			color: var(--color-grey-0);
			text-align: center;
		}
	}

	&__remove-btn {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		top: var(--uploader-btn-remove-pos);
		right: var(--uploader-btn-remove-pos);
		z-index: 2;
		width: var(--uploader-btn-remove-size);
		height: var(--uploader-btn-remove-size);
		font-size: 0;
		border-radius: 50%;
		text-align: center;
		background-color: var(--color-grey-2);
		opacity: 0.8;
		box-sizing: border-box;

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			display: inline-block;
			width: 10PX;
			height: 1PX;
			border-radius: 1PX;
			background: var(--uploader-btn-remove-color);
		}

		&::before {
			transform: translate3d(-50%, -50%, 0) rotate(45deg);
		}

		&::after {
			transform: translate3d(-50%, -50%, 0) rotate(-45deg);
		}
	}

	&__preview-img {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: var(--border-radius-hg);
	}

	&__preview-video{
		width: 100%;
		height: 100%;
	}
}