.dropzone {
	position: relative;
	display: block;
	width: 100%;
	margin-block-end: 0;
	padding: var(--s-6) var(--s-4);
	border: var(--border-width) dashed var(--color-border-high);
	border-radius: var(--radius-box);
	text-align: center;
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
	cursor: pointer;

	&:hover,
	&.over {
		border-color: var(--color-fg-accent);
		color: var(--color-text);
	}

	&:has(.input:focus-visible) {
		outline: 2px solid var(--color-fg-accent);
		outline-offset: 2px;
	}

	&.disabled {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}
}

.action {
	text-decoration: underline;
	color: var(--color-fg-accent);
}

.input {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	clip-path: inset(50%);
}