/**
 * Prescription upload component.
 */

.dc-prescription-upload {
	border: 2px dashed var(--dc-colour-border);
	border-radius: var(--dc-radius-lg);
	padding: var(--dc-space-8);
	text-align: center;
	background: var(--dc-colour-bg);
	transition: border-color var(--dc-transition), background var(--dc-transition);
}

.dc-prescription-upload.is-dragover {
	border-color: var(--dc-colour-brand);
	background: color-mix(in srgb, var(--dc-colour-brand) 5%, var(--dc-colour-bg));
}

.dc-prescription-upload__label {
	font-weight: 600;
	margin-bottom: var(--dc-space-2);
}

.dc-prescription-upload__hint {
	font-size: var(--dc-font-size-sm);
	color: var(--dc-colour-muted);
	margin-bottom: var(--dc-space-4);
}

.dc-prescription-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.dc-prescription-upload__progress {
	margin-top: var(--dc-space-4);
	height: 4px;
	background: var(--dc-colour-border);
	border-radius: var(--dc-radius-full);
	overflow: hidden;
}

.dc-prescription-upload__progress-bar {
	height: 100%;
	background: var(--dc-colour-brand);
	width: 0%;
	transition: width var(--dc-transition);
}

.dc-prescription-upload__status {
	margin-top: var(--dc-space-3);
	font-size: var(--dc-font-size-sm);
}

.dc-prescription-upload__status--error {
	color: var(--dc-colour-error);
}

.dc-prescription-upload__status--success {
	color: var(--dc-colour-success);
}

.dc-prescription-upload__file-list {
	margin-top: var(--dc-space-4);
	text-align: left;
	font-size: var(--dc-font-size-sm);
}

.dc-prescription-upload__list {
	list-style: none;
	margin: var(--dc-space-4) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dc-space-2);
}

.dc-prescription-upload__file {
	display: flex;
	align-items: center;
	gap: var(--dc-space-3);
	padding: var(--dc-space-3);
	background: var(--dc-colour-surface);
	border: 1px solid var(--dc-colour-border);
	border-radius: var(--dc-radius-md);
}

.dc-prescription-upload__file-thumb {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dc-colour-bg);
	border-radius: var(--dc-radius-sm);
	font-size: var(--dc-font-size-lg);
	flex-shrink: 0;
}

.dc-prescription-upload__file-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dc-prescription-upload__file-remove {
	font-size: var(--dc-font-size-sm);
	color: var(--dc-colour-muted);
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.dc-prescription-upload__file-remove:hover {
	color: var(--dc-colour-error);
}