:where(.dropzone) {
	--dropzone-color-text: var(--text-faded);
	--dropzone-icon-active: var(--text-accent-2);
	--dropzone-color-background: var(--surface-2);
	--dropzone-color-background-active: var(--surface-accent-0);
	--dropzone-color-border: var(--color-border);
	--dropzone-color-border-active: var(--color-border-accent);
	--dropzone-opacity-hover-preview: 0;
	--dropzone-shadow-opacity: 0;
	--dropzone-border-size: 0.2rem;
}

:where([data-theme="dark"] .dropzone) {
	--dropzone-color-text: var(--text-0);
	--dropzone-icon-active: var(--text-accent-0);
	--dropzone-color-background: transparent;
	--dropzone-color-background-active: var(--surface-accent-5);
}

.dropzone {
	position: relative;
	cursor: pointer;
	width: 100%;
	height: 15em;
	color: var(--dropzone-color-text);
	background: var(--dropzone-color-background);
	border: var(--dropzone-border-size) dashed var(--dropzone-color-border);
	border-radius: var(--border-radius-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ifm-global-shadow-lw);
}

.dropzone::before {
	content: "";
	position: absolute;
	pointer-events: none;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: var(--ifm-global-shadow-md);
	z-index: -1;
	opacity: var(--dropzone-shadow-opacity);
	transition: opacity 200ms ease;
}

.active {
	--dropzone-opacity-hover-preview: 0.8;
	--dropzone-shadow-opacity: 1;
}

.hasFiles {
	--dropzone-color-background: var(--dropzone-color-background-active);
	--dropzone-color-border: var(--dropzone-color-border-active);
	--dropzone-shadow-opacity: 0.25;
}

.fileHoverPreview {
	--dropzone-color-background: var(--dropzone-color-background-active);
	--dropzone-color-border: var(--dropzone-color-border-active);

	position: absolute;
	top: calc(-1 * var(--dropzone-border-size));
	right: calc(-1 * var(--dropzone-border-size));
	bottom: calc(-1 * var(--dropzone-border-size));
	left: calc(-1 * var(--dropzone-border-size));
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--dropzone-color-text);
	background: var(--dropzone-color-background);
	border: var(--dropzone-border-size) dashed var(--dropzone-color-border);
	border-radius: var(--border-radius-medium);
	opacity: var(--dropzone-opacity-hover-preview);
	transition: opacity 150ms ease-in-out;
}

.icon {
	font-size: 3rem;
	width: 1em;
	height: 1em;
}

.fileHoverIcon {
	font-size: 5rem;
	color: var(--dropzone-icon-active);
}

.uploadIcon {
	color: var(--dropzone-color-text);
	margin-right: 0.5rem;
}