.dropzone {
	display: flex;
	flex-flow: row wrap;

	&.open {
		margin: var(--bb-rl-space-200) var(--bb-rl-space-300);
	}

	&.dz-clickable {
		cursor: pointer;

		* {
			cursor: default;
		}
	}

	&.dz-started .dz-default.dz-message {
		flex-basis: 100%;
		max-width: 165px;
		min-height: 160px;
		margin: 0 var(--bb-rl-space-200) var(--bb-rl-space-200) 0;
		border-radius: var(--bb-rl-radius-md);
		padding: 0 5px;
		cursor: pointer;
	}

	.dz-default {
		background-color: var(--bb-rl-background-secondary-color);
		border: 1px dashed var(--bb-rl-border-tertiary-color);
		border-radius: var(--bb-rl-radius-lg);
		min-height: 160px;
		max-height: 160px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: var(--bb-rl-font-size-base);
		color: var(--bb-rl-text-color);
		line-height: 1.5;
		padding: var(--bb-rl-space-300) 0;

		&.dz-message {
			flex: 0 0 100%;
			min-width: 0;
			cursor: pointer;
		}
	}

	.dz-button {
		font-size: var(--bb-rl-font-size-sm);
		color: var(--bb-rl-text-tertiary-color);
		line-height: 1.5;
		background-color: transparent;
		border: 0;
		cursor: pointer;
		outline: none;

		&:before {
			font-family: bb-icons-rl;
			font-size: var(--bb-rl-base-line);
			font-weight: 500;
			height: 48px;
			width: 48px;
			display: inline-block;
			border: 1px solid var(--bb-rl-border-secondary-color);
			background-color: var(--bb-rl-background-secondary-color);
			border-radius: var(--bb-rl-radius-full);
			line-height: 48px;
			color: var(--bb-rl-icon-primary-color);
			margin-bottom: var(--bb-rl-space-100);
		}

		> strong {
			display: block;
			color: var(--bb-rl-text-color);
			font-size: var(--bb-rl-font-size-base);
			font-weight: 500;
		}
	}

	&.media-dropzone {

		.dz-button:before {
			content: "\e10e";
		}
	}

	&.video-dropzone {

		.dz-button:before {
			content: "\e4da";
		}

		.dz-preview.dz-complete:not(.dz-error) {

			.dz-progress-ring-wrap {
				display: block;
				color: var(--bb-rl-text-white-color);
				top: 50%;
				transform: translate(-50%, -50%);

				[class*="bb-icons-"] {
					color: var(--bb-rl-text-white-color);
				}

				&:after,
				.dz-progress-ring {
					display: none;
				}
			}
		}
	}

	&.document-dropzone {

		.dz-button:before {
			content: "\e39a";
		}

		.dz-icon {
			display: none;
		}

		.dz-preview.dz-complete:not(.dz-error) {

			.dz-icon {
				display: flex;
				justify-content: center;
				color: var(--bb-rl-icon-secondary-color);
				font-size: 48px;
				margin-bottom: var(--bb-rl-space-100);
				min-height: 48px;

				&:before {
					content: "\e230";
					font-family: bb-icons-rl;
					font-size: 48px;
					line-height: 1;
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					z-index: 1;
				}

				[class*="bb-icons"] {
					font-weight: 500;
					z-index: 11;
					position: relative;
					background-color: var(--bb-rl-background-secondary-color);
				}
			}

			&.dz-error .dz-icon [class*="bb-icons"] {
				background-color: var(--bb-rl-background-danger-secondary-color);
			}

			.dz-progress {
				display: none;
			}

			.dz-details {
				display: block;
				top: 45px;
				left: 0;
				width: 100%;
				text-align: center;
			}
		}

		.dz-progress-ring-wrap .bb-icons-rl-link:before {
			content: "\e39a";
		}
	}

	.dz-preview {
		background-color: var(--bb-rl-background-secondary-color);
		border: 1px solid var(--bb-rl-border-secondary-color);
		width: 165px;
		height: 160px;
		margin: 0 var(--bb-rl-space-200) var(--bb-rl-space-200) 0;
		border-radius: var(--bb-rl-radius-md);
		padding: 0 5px;
		position: relative;

		&.dz-error {
			background-color: var(--bb-rl-background-danger-secondary-color);
		}

		.dz-progress-ring-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 28px;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50%;
			height: 50px;
			width: 50px;
			z-index: 11;

			&:after {
				content: "";
				display: block;
				position: absolute;
				inset: 0;
				border: 1px solid var(--bb-rl-border-secondary-color);
				border-radius: 50%;
				margin: 2px;
				z-index: -1;
			}

			[class*=" bb-icons-"] {
				color: var(--bb-rl-icon-color);
				font-size: var(--bb-rl-base-line);
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 11;
			}
		}

		&.dz-complete:not(.dz-error) {

			.dz-details,
			.dz-progress-ring-wrap {
				display: none;
			}

			.dz-preview {
				border-color: transparent;
			}

			.dz-image img,
			.dz-video-thumbnail img {
				opacity: 1;
			}
		}
	}

	.dz-image {
		height: 160px;

		img {
			width: 165px;
			height: 100%;
			margin: 0 auto;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			object-fit: cover;
			opacity: 0;
			border-radius: var(--bb-rl-radius-md);
		}
	}

	.dz-video-thumbnail {
		height: 160px;

		img {
			width: 165px;
			height: 100%;
			margin: 0 auto;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			object-fit: cover;
			opacity: 0;
			border-radius: var(--bb-rl-radius-md);
		}
	}

	.dz-error-title {
		display: none;
	}

	.dz-details {
		position: absolute;
		top: 85px;
		left: 0;
		width: 100%;

		.dz-progress {
			display: block;
			color: var(--bb-rl-text-color);
			font-size: 14px;
			font-weight: 500;
			line-height: 1.5;
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 0 var(--bb-rl-space-200) 0;
		}

		.dz-filename {
			display: block;
			color: var(--bb-rl-text-tertiary-color);
			font-size: 11px;
			line-height: 1.4;
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			margin-top: var(--bb-rl-space-50);
			padding: 0 var(--bb-rl-space-100) 0;
		}

		.dz-size {
			text-align: center;
		}
	}

	.dz-remove {
		font-size: 0;
		border-radius: 4px;
		background-color: var(--bb-rl-background-color);
		color: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
		outline: none;

		&:before {
			content: "\e4f6";
			font-size: 12px;
			font-family: bb-icons-rl;
			color: var(--bb-rl-icon-secondary-color);
			font-weight: 700;
			line-height: 1;
			margin: 2px;
		}
	}

	.dz-error-message {
		display: none;
	}

	//Error UI
	.dz-error {
		position: relative;

		.dz-error-message {
			background-color: var(--bb-rl-background-danger-primary-color);
			color: var(--bb-rl-text-white-color);
			font-size: var(--bb-rl-font-size-xs);
			font-weight: 500;
			border-radius: var(--bb-rl-radius-sm);
			padding: var(--bb-rl-space-100);
			text-align: center;
			position: absolute;
			top: -65px;
			left: 0;
			right: 0;
			z-index: 11;

			&:after {
				content: "";
				border-top: 8px solid var(--bb-rl-background-danger-primary-color);
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				bottom: -8px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.dz-progress-ring-wrap {

			.dz-progress-ring {
				display: none;
			}

			[class*=" bb-icons-"] {
				color: var(--bb-rl-icon-danger-secondary-color);
			}

			&:after {
				border-color: var(--bb-rl-border-danger-secondary-color);
			}
		}

		.dz-progress {
			display: none;
		}

		.dz-details {
			top: 106px;
		}

		.dz-error-title {
			display: block;
			color: var(--bb-rl-text-danger-secondary-color);
			font-size: 14px;
			font-weight: 500;
			line-height: 1.5;
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			top: 85px;
		}

		.dz-details .dz-filename {
			color: var(--bb-rl-text-danger-secondary-color);
		}

		&:hover {

			.dz-error-message {
				display: block;
			}
		}
	}

	&.dz-max-files-reached {

		&.open {
			pointer-events: none; // Prevent outside clicks to open uploader

			.dz-preview {
				pointer-events: auto;
			}
		}

		.dz-default.dz-message {
			display: none;
		}
	}
}

// dropzone small UI
.attachments--small {

	div.dropzone {
		padding: 0;
		margin: 0;
		position: static;
		pointer-events: none;
		gap: var(--bb-rl-space-200);

		* {
			pointer-events: auto;
		}

		&.dz-max-files-reached.dz-started {
			pointer-events: none;

			.dz-default.dz-message {
				display: none;
			}

			.dz-preview {
				pointer-events: auto;
			}
		}

		&.dz-started {
			height: auto;
			overflow: initial;
			padding: 0 var(--bb-rl-space-300) var(--bb-rl-space-200);
			gap: var(--bb-rl-space-100);

			.dz-default.dz-message {
				display: flex;
			}
		}

		.dz-button:before {
			margin-bottom: 0;
		}

		.dz-preview {
			margin: 0;
			width: 80px;
			height: 72px;
		}

		&.dz-started .dz-default.dz-message {
			max-width: 80px;
			min-height: 72px;
			max-height: 72px;
		}

		.dz-preview .dz-progress-ring-wrap {
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.dz-filename,
		.dz-details,
		.dz-size,
		.dz-global-progress {
			display: none;
		}

		.dz-remove {
			z-index: 11;
		}

		&.document-dropzone .dz-preview.dz-complete:not(.dz-error) .dz-details {
			top: 12px;
		}
	}

	[class*="attached-gif-container"] {
		margin-bottom: 0;
		background: none !important;
		height: auto !important;
		width: auto !important;
		min-height: auto !important;
		display: table;
		position: relative;

		.gif-image-container img {
			background-color: var(--bb-rl-background-secondary-color);
			height: 100px;
			width: 100px;
			object-fit: cover;
			border-radius: var(--bb-rl-radius-md);
			margin: 0 0 var(--bb-rl-space-200) var(--bb-rl-space-200);
		}

		.gif-image-remove {
			box-shadow: none;
			right: -8px;
			top: -8px;
			position: absolute;
			background-color: var(--bb-rl-background-color);
			border-radius: var(--bb-rl-radius-full);
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			font-size: 14px;
			padding: 2px;
			cursor: pointer;
		}

		@media screen and (max-width: 560px) {
			max-width: 100%;
			background-repeat: no-repeat;
		}
	}

	[class*="messages-attached-gif-container"] {

		.gif-image-container img {
			margin-bottom: 15px;
		}
	}

	div.dropzone .dz-default.dz-message {
		display: none;
		margin: 0;
	}
}
