//	=================
//    	Imports
//	=================

@import '../../assets/base/color_variables';   	// Color Variables
@import '../../assets/base/fonticons';   			// Fonticons Variables
@import '../../assets/base/urls';   				// URLS Variables
@import '../../assets/base/utilities_variables';  // Utilities Variables

.dropzone {
	box-sizing: border-box;
	position: $pos-rel;
	* {
		box-sizing: border-box;
	}
	.dz-preview {
		position: $pos-rel;
		display: inline-block;
		width: 120px;
		margin: 0.5em;
		.dz-progress {
			display: block;
			height: 15px;
			border: $b-width-1 $solid $color_286;
			.dz-upload {
				display: block;
				height: 100%;
				width: 0;
				background: $success;
			}
		}
		.dz-error-message {
			color: $danger;
			display: none;
		}
		.dz-error-mark {
			position: $pos-abs;
			display: none;
			left: 30px;
			top: 30px;
			width: 54px;
			height: 58px;
			left: 50%;
			margin-left: -27px;
		}
		.dz-success-mark {
			position: $pos-abs;
			display: none;
			left: 30px;
			top: 30px;
			width: 54px;
			height: 58px;
			left: 50%;
			margin-left: -27px;
		}
	}
	.dz-preview.dz-error {
		.dz-error-message {
			display: block;
		}
		.dz-error-mark {
			display: block;
		}
	}
	.dz-preview.dz-success {
		.dz-success-mark {
			display: block;
		}
	}
}
.dropzone-file-area {
	background: $white;
	padding: $p-50;
	margin: $m-0 auto;
	text-align: $align-center;
	border-radius: $br-4;
	i {
		font-size: 50px;
	}
}
.dropzone.dz-clickable {
	* {
		color: $additional-color-11;
	}
}
.dropzone-file-area.dropzone-file-area--secondary {
	border: $b-width-1 $dash $secondary;
	background-color: $light-secondary;
	color: $additional-color-11;
}
.dropzone-file-area.dropzone-file-area--success {
	border: $b-width-1 $dash $info;
	background-color: $light-info;
	color: $additional-color-11;
}