/* ------------------------------------------------------------------------------
 *
 *  # Dropzone file uploader
 *
 *  Styles for dropzone.min.js - open source library that provides drag’n’drop file uploads with image previews
 *
 * ---------------------------------------------------------------------------- */

// Check if component is enabled
@if $enable-dropzone {

	// Base
	.dropzone {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		border: $dropzone-border-width $dropzone-border-style $dropzone-border-color;
		min-height: $dropzone-min-height;
		background-color: $dropzone-bg;
		padding: $dropzone-spacer;
		@include border-radius($border-radius);

		// Clickable area
		&.dz-clickable {
			* {
				cursor: default;
			}

			&,
			.dz-message,
			.dz-message * {
				cursor: pointer;
			}
		}

		// Message
		.dz-message {
			opacity: 1;

			// Button
			.dz-button {
				background: none;
				color: inherit;
				border: none;
				padding: 0;
				font: inherit;
				cursor: pointer;
				outline: inherit;
			}
		}
		&.dz-started .dz-message {
			display: none;
		}

		// Drag hover border and bg color
		&.dz-drag-hover {
			border-color: $dropzone-drag-border-color;
			background-color: $dropzone-drag-bg;
			color: $dropzone-drag-color;
		}
	}


	//
	// Messages
	//

	.dropzone {

		// Default styles
		.dz-default {
			&.dz-message {
				width: 100%;
				align-self: center;
				text-align: center;
				opacity: 1;
				@include border-radius($border-radius);
				@include transition(opacity ease-in-out $component-transition-timer);

				// Icon
				&:before {
					content: $icon-uploader-placeholder;
					font-family: $icon-font-family;
					font-size: $dropzone-placeholder-icon-size;
					display: block;
					margin-bottom: map-get($spacers, 3);
					line-height: 1;
					color: $dropzone-placeholder-icon-color;
					@include ll-font-smoothing();
				}

				// Text label
				> span {
					font-size: $h5-font-size;
					color: $dropzone-placeholder-text-color;
					display: block;
					margin-top: ($dropzone-min-height / 2) + map-get($spacers, 3);

					// Subtext
					span {
						display: block;
						color: lighten($dropzone-placeholder-text-color, 15%);
						font-size: $h6-font-size;
					}
				}
			}
		}

		// On files drag
		&.dz-drag-hover .dz-message {
			opacity: 0.75;
		}
	}


	//
	// Preview
	//

	.dropzone {
		.dz-preview {
			background-color: $body-bg;
			position: relative;
			align-self: flex-start;
			display: inline-block;
			margin: $dropzone-preview-spacer;
			padding: $dropzone-preview-spacer;
			@include border-radius($border-radius);

			// Details
			.dz-details {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				background-color: rgba($body-bg, 0.85);
				width: 100%;
				height: 100%;
				padding: $dropzone-preview-spacer;
				@include transition(opacity ease-in-out $component-transition-timer);
			}

			// Hover state
			@include hover {
				.dz-details {
					opacity: 1;
				}
			}

			// Hide file details if error message exists
			&.dz-error:hover .dz-details {
				display: none;
			}

			// Marks
			.dz-error-mark,
			.dz-success-mark {
				display: none;
				position: absolute;
				z-index: 9;
				top: 0;
				right: 0;
				padding: $dropzone-preview-spacer;
				background-color: $body-bg;
				@include border-radius(0 $card-border-radius 0 $card-border-radius);

				// Icon base
				&:after {
					font-family: $icon-font-family;
					display: block;
					font-size: $font-size-base;
					line-height: 1;
					@include ll-font-smoothing();
				}

				// Hide default things
				span,
				svg {
					display: none;
				}
			}
			.dz-error-mark {
				color: $red-200;

				&:after {
					content: $icon-validation-error;
				}
			}
			.dz-success-mark {
				color: $green-200;

				&:after {
					content: $icon-validation-success;
				}
			}

			// Error and success marks
			&.dz-error .dz-error-mark,
			&.dz-success .dz-success-mark {
				display: block;
				opacity: 1;
			}

			// Uploading progress
			.dz-progress {
				position: absolute;
				bottom: $dropzone-preview-spacer;
				left: $dropzone-preview-spacer;
				right: $dropzone-preview-spacer;
				height: ($dropzone-preview-spacer / 2);
				display: none;

				// Upload progress
				.dz-upload {
					display: block;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					width: 0%;
					height: 100%;
					background-color: $green-200;
					@include transition(width ease-in-out $component-transition-timer);
					@include border-radius($border-radius);
				}
			}
			&.dz-processing .dz-progress {
				display: block;
			}
			&.dz-success {
				.dz-progress {
					display: block;
					opacity: 0;
					@include transition(opacity ease-in-out $component-transition-timer);
				}
			}

			// Error message
			.dz-error-message {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba($dropzone-bg, 0.85);
				padding: $dropzone-preview-spacer;
				color: $red-200;
				width: 100%;
				height: 100%;
				opacity: 0;
				@include border-radius($border-radius);
				@include transition(opacity ease-in-out $component-transition-timer);
			}
			&.dz-error {
				@include hover {
					.dz-error-message {
						opacity: 1;
					}
				}

				.dz-progress .dz-upload {
					background: $red-200;
				}
			}

			// Image preview
			&.dz-image-preview:hover {
				.dz-details img {
					display: block;
					opacity: 0.1;
				}
			}

			// Image thumb
			.dz-image {
				width: $dropzone-preview-width;;
				height: $dropzone-preview-width;;
				overflow: hidden;

				img {
					width: 100%;
				}
			}

			// Remove button
			a.dz-remove {
				position: relative;
				color: $btn-light-color;
				background-color: $btn-light-bg;
				border: $btn-border-width solid $btn-light-border-color;
				display: block;
				text-align: center;
				margin-top: map-get($spacers, 2);
				cursor: pointer;
				z-index: 21;
				@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size, $btn-line-height-sm, $btn-border-radius);
				@include transition($btn-transition);

				// Hover state
				@include hover-focus() {
					color: $btn-light-hover-color;
					background-color: $btn-light-hover-bg;
					border-color: $btn-light-hover-border-color;
				}

				// Active state
				&:active {
					color: $btn-light-active-color;
					background-color: $btn-light-active-bg;
					border-color: $btn-light-active-border-color;
				}
			}
		}
	}
}