/* Dropzone */

.dropzone {
	border: none;
	padding: 0;
	min-height: auto;
	background: transparent;

	&.cover-uploader-wrapper {
		position: relative;
		min-height: 200px;

		.file-wrapper {
			width: 100%;
		}

		.dz-default.dz-message {
			position: absolute;
			left: 0;
			width: 100%;

			.dz-button {
				width: 100%;
			}
		}

		.dz-preview {
			width: 100%;
		}
	}

	.dz-preview {
		width: 180px;
		height: 180px;
		margin: 0 20px 20px 0;

		&.dz-error {
			margin: 0;
		}

		.dz-image {
			width: 100%;
			height: 100%;
			border-radius: 6px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.dz-details {
			margin-top: 40px;
		}

		.dz-error-message {
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
		}
	}

	.dz-default.dz-message {
		display: inline-block;
		margin-top: 0;
		margin-bottom: 20px;
		float: left;
	}

	.dz-image-wrapper {
		display: inline-block;
	}

	.dz-message {
		.dz-button {
			border: 1px solid #dbdeeb;
			border-radius: 6px;
			background-image: url("../images/media/image-icon.svg");
			background-repeat: no-repeat;
			background-position: 50% 33%;
			background-size: 60px 60px;
			height: 180px;
			width: 180px;
			margin: 0 20px 0 0;
			display: block;
			background-color: #f7f8f9;
			padding: 102px 8px 20px 8px;
			font-size: 13px;
			color: $mainTextColor;

			span {
				color: $mainColor;
				font-weight: 600;
			}
		}
	}

	.delete-file {
		color: red;
		font-size: 20px;
		position: absolute;
		top: 7px;
		left: 5px;
		width: 25px;
		height: 25px;
		z-index: 20;
		line-height: 27px;
		cursor: pointer;
		border-radius: 50%;
		background: $whiteColor;
		text-align: center;

		i {
			cursor: pointer;
			margin: 0;
		}
	}
}

/* PM & Chat */
.thread-input-padding,
.message-box-footer-images-uploader {
	.dz-default.dz-message {
		.dz-button {
			height: 85px;
			width: 85px;
			background-size: 30px 30px;
			color: transparent;
			padding: 0;
			background-color: transparent;
			white-space: normal;
		}
	}

	.dz-image-wrapper,
	.dz-preview {
		width: 85px;
		height: auto;
		min-height: auto;
		margin-bottom: 10px;
		margin-right: 20px;

		.dz-image {
			width: 85px;
			height: 85px;
		}

		.dz-details {
			margin-top: 0;

			.dz-size {
				font-size: 11px;
			}
			.dz-filename {
				font-size: 10px;
			}
		}
	}
}

/* PM */
.thread-input-padding {
	.dropzone.messages-image-uploader-wrapper {
		@include mobile {
			overflow-x: auto;
			overflow-y: hidden;
			padding: 15px 15px 0 5px;
			white-space: nowrap;
		}
	}
}

/* Chat */
.message-box-footer .dropzone.messages-image-uploader-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 10px;
	padding: 15px 0px;
	border-top: 1px solid #f1f2f3;
	border-bottom: 1px solid #f1f2f3;
	white-space: nowrap;

	.dz-default.dz-message {
		display: inline-block;
		margin-top: 0;
		margin-bottom: 0;

		.dz-button {
			padding: 5px;
		}
	}
}