@import '../../../../../styles/variables.less';

.APMDropzone {
	position: relative;
	transition: all .1s ease;
	height: 60px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: @blue-gray-light;
	border: 1px dashed #8091A5;
	border-radius: 3px;

	&-container {
		border-radius: 3px;
		background: #F4F7FA;
		opacity: .8;
		height: 60px;
		width: 100%;
	}

	&-fetching {
		opacity: 1 !important;
	}

	&-icon {
		font-size: 28px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding-top: 1px;
		color: @charcoal;

		&-rotate {
			animation: rotate360 1s linear 0s normal infinite;
		}
	}

	&-enter {
		border-color: @charcoal;
		color: @charcoal;
		background-image: none !important;

		.APMDropzone-icon {
			animation: upload 1.2s linear 0s normal infinite;
		}
	}


	&:hover&:not(&-fetching) {
		cursor: pointer;
		border-color: @charcoal;
		background-image: none !important;
		opacity: 1 !important;

		.APMDropzone-icon {
			color: @charcoal;
			animation: hover .5s linear 0s alternate infinite;
		}
	}
}

@keyframes hover {
	0% {
		top: 48%;
	}

	100% {
		top: 53%;
	}
}

@keyframes upload {
	0% {
		transform: translate(-50%, -50%) scale(1.2);
		background-color: @blue-gray-light;
		top: 60%;
		opacity: 1;
	}

	40% {
		transform: translate(-50%, -50%) scale(.7);
		top: 52%;
		background-color: @blue-gray-light;
	}

	50% {
		transform: translate(-50%, -50%) scale(.3);
		top: 45%;
		opacity: .9;
		background-color: @blue-gray-light;
	}


	65% {
		transform: translate(-50%, -50%) scale(.2);
		top: 30%;
		opacity: .5;
		background-color: @blue-gray-light;
	}

	80% {
		transform: translate(-50%, -50%) scale(.1);
		background-color: @charcoal;
		top: 23%;
		opacity: .2;
	}

	100% {
		transform: translate(-50%, -50%) scale(0);
		background-color: @charcoal;
		opacity: .1;
		top: 20%;
	}
}

@keyframes rotate360 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}