.dropzone {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: spacing('base');
	width: 100%;
	min-height: rem(240);
	background-color: $c-bg;
	border: 2px dashed $c-border;
	border-radius: 4px;

	&:hover {
		border: 2px solid $c-primary;
	}

	&.dropzone-small {
		min-height: rem(160);
	}
}

.dropzone__btn,
.dropzone__text {
	margin-top: spacing('base');
}

.dropzone__icons {
	line-height: 0;
}

.dropzone__icon {
	stroke: $c-text-icon;
	fill: none;
}

.dropzone__text {
	color: $c-text-light;
}

.dropzone__helper-text,
.dropzone__helper-text-bottom {
	@include typescale('heading-md');

	.dropzone-small & {
		@include typescale('body');
	}
}

.dropzone__helper-text-bottom {
	position: absolute;
	bottom: spacing('base');
	left: 0;
	width: 100%;
	text-align: center;
}

.dropzone__warn-drop-icon {
	stroke: $c-ui-critical;
}

.dropzone__did-upload-icon {
	stroke: $c-ui-online;
}

.dropzone__uploading-progress-wrapper {
	margin-top: spacing('base');
}

.dropzone__uploading-text {
	@include typescale('heading-md');
}

.dropzone__uploading-progress-wrapper {
	position: relative;
	width: 100%;
	height: rem(8);
	background-color: $c-grey-01;
}

.dropzone__uploading-progress {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: $c-primary;
}

// Small Variant
.dropzone-small {
	.dropzone__btn {
		margin-top: spacing('tight');
	}
}

// Circular Variant
.dropzone-circular {
	border-radius: 9999px;
	max-width: rem(160);

	.dropzone__btn {
		margin: spacing('tight') auto;
	}
}

// States
.dropzone--is-hovered,
.dropzone--has-error {
	.dropzone__btn,
	.dropzone__text {
		opacity: 0;
		visibility: hidden;
	}
}

// Hover Styles
.dropzone--is-hovered {
	&.dropzone {
		background-color: $c-bg;
		border: 2px solid $c-primary;
	}
}

// Error Styles
.dropzone--has-error {
	&.dropzone {
		background-color: $c-ui-critical-light;
		border: 2px solid $c-ui-critical;
	}
}

// Uploading Styles
.dropzone--is-uploading,
.dropzone--is-disabled {
	&.dropzone {
		border: 2px solid $c-border;

		&:hover {
			border: 2px solid $c-border;
		}
	}
}