Dropzone

.pds-dropzone {
	align-items: center;
	background-color: transparent;
	border: var(--pds-border-width-default) dashed var(--pds-color-border-default);
	border-radius: var(--pds-border-radius-input);
	color: var(--pds-color-foreground-default-secondary);
	display: flex;
	gap: var(--pds-spacing-2xs);
	justify-content: center;
	padding: var(--pds-spacing-xs) var(--pds-spacing-s);
	transition: var(--pds-animation-transition-input);
}

.pds-dropzone__icon {
	flex-shrink: 0;
}

/* The end of the sentence is a real button, styled as the PDS link. */
.pds-dropzone__browse {
	background: none;
	border: 0;
	border-radius: var(--pds-border-radius-default);
	color: var(--pds-color-interactive-link-default);
	cursor: pointer;
	font-family: var(--pds-typography-ff-default);
	font-size: var(--pds-typography-size-s);
	font-weight: var(--pds-typography-fw-semibold);
	line-height: inherit;
	margin: 0;
	padding: 0;
}

.pds-dropzone__browse:hover:enabled {
	color: var(--pds-color-interactive-link-hover);
	text-decoration: underline;
}

.pds-dropzone__browse:active:enabled {
	color: var(--pds-color-interactive-link-active);
}

.pds-dropzone__browse:focus-visible {
	outline: var(--pds-border-width-outline) solid
		var(--pds-color-interactive-focus);
	outline-offset: var(--pds-spacing-5xs);
}

/* A file is over the zone: a solid, highlighted outline. */
.pds-dropzone--drag-over {
	background-color: var(--pds-color-interactive-background-selected);
	border-color: var(--pds-color-interactive-focus);
	border-style: solid;
}

.pds-dropzone--disabled {
	opacity: 40%;
}

.pds-dropzone__browse:disabled {
	color: inherit;
	cursor: not-allowed;
	font-weight: inherit;
}