/*!
 * @be-partner-labs/ds v1.8.0 — components/file-upload
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/file-upload.min.css">
 * npm:  @import "@be-partner-labs/ds/components/file-upload";
 * Docs: https://ds.bepartnerlabs.com/components/file-upload/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/**
	 * .bp-file-upload
	 * Dropzone with drag feedback, per-file progress, and inline retry.
	 * Requires the bp-file-upload custom element (public/bp-file-upload.js)
	 * for drag state, file selection, and trickle progress.
	 * Public API:
	 *   --file-upload-border           Dropzone border (default: dashed)
	 *   --file-upload-border-radius    Dropzone border radius
	 *   --file-upload-background       Dropzone background
	 *   --file-upload-padding          Dropzone inner padding
	 *   --file-upload-gap              Gap between dropzone children
	 *   --file-upload-accent           Drag-over / focus accent color
	 */
	.bp-file-upload {
		--_border: var(--file-upload-border, 2px dashed var(--bp-color-border));
		--_border-radius: var(--file-upload-border-radius, var(--bp-radius-lg));
		--_background: var(--file-upload-background, var(--bp-color-bg-subtle));
		--_padding: var(--file-upload-padding, var(--bp-space-8));
		--_gap: var(--file-upload-gap, var(--bp-space-2));
		--_accent: var(--file-upload-accent, var(--bp-primary));

		display: flex;
		flex-direction: column;
		gap: var(--bp-space-4);
		container-type: inline-size;
	}

	.bp-file-upload__dropzone {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--_gap);
		padding: var(--_padding);
		text-align: center;
		background-color: var(--_background);
		border: var(--_border);
		border-radius: var(--_border-radius);
		cursor: pointer;
		transition:
			border-color var(--bp-duration-fast) var(--bp-ease),
			background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-file-upload__input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.bp-file-upload__input:focus-visible ~ .bp-file-upload__dropzone,
	.bp-file-upload__dropzone:has(.bp-file-upload__input:focus-visible) {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	.bp-file-upload__icon {
		font-size: var(--bp-text-2xl);
		color: var(--bp-color-text-muted);
	}

	.bp-file-upload__copy {
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-sm);
	}

	.bp-file-upload__browse {
		color: var(--_accent, var(--bp-primary));
		font-weight: var(--bp-font-weight-medium);
		text-decoration: underline;
	}

	/* ── Drag-over state — border, glow, and copy shift before the drop ── */
	.bp-file-upload[data-dragover] .bp-file-upload__dropzone {
		border: 2px dashed var(--_accent);
		background-color: color-mix(in srgb, var(--_accent) 8%, var(--bp-color-bg-subtle));
		box-shadow: var(--bp-focus-ring);
	}

	/* ── File list ── */
	.bp-file-upload__list {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-3);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.bp-file-upload__item {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--bp-space-1) var(--bp-space-3);
		padding: var(--bp-space-3) var(--bp-space-4);
		background-color: var(--bp-color-bg-elevated);
		border: 1px solid var(--bp-color-border);
		border-radius: var(--bp-radius-md);
	}

	.bp-file-upload__name {
		grid-column: 1;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bp-file-upload__size {
		grid-column: 2;
		font-size: var(--bp-text-xs);
		color: var(--bp-color-text-muted);
	}

	.bp-file-upload__progress {
		grid-column: 1 / -1;
		width: 100%;
		height: 6px;
		appearance: none;
		border: none;
		border-radius: var(--bp-radius-full);
		overflow: hidden;
	}

	.bp-file-upload__progress::-webkit-progress-bar {
		background-color: var(--bp-color-bg-subtle);
	}

	.bp-file-upload__progress::-webkit-progress-value {
		background-color: var(--bp-primary);
		transition: width var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-file-upload__progress::-moz-progress-bar {
		background-color: var(--bp-primary);
	}

	.bp-file-upload__percent {
		grid-column: 1;
		font-size: var(--bp-text-xs);
		color: var(--bp-color-text-muted);
	}

	.bp-file-upload__retry {
		grid-column: 2;
		justify-self: end;
		background: none;
		border: none;
		padding: 0;
		font-size: var(--bp-text-xs);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-error);
		cursor: pointer;
		text-decoration: underline;
	}

	.bp-file-upload__retry[hidden] {
		display: none;
	}

	/* ── Item states ── */
	.bp-file-upload__item[data-state='success'] .bp-file-upload__progress::-webkit-progress-value {
		background-color: var(--bp-color-success);
	}
	.bp-file-upload__item[data-state='success'] .bp-file-upload__progress::-moz-progress-bar {
		background-color: var(--bp-color-success);
	}
	.bp-file-upload__item[data-state='success'] .bp-file-upload__percent {
		color: var(--bp-color-success);
	}

	.bp-file-upload__item[data-state='error'] .bp-file-upload__progress::-webkit-progress-value {
		background-color: var(--bp-color-error);
	}
	.bp-file-upload__item[data-state='error'] .bp-file-upload__progress::-moz-progress-bar {
		background-color: var(--bp-color-error);
	}
	.bp-file-upload__item[data-state='error'] .bp-file-upload__percent {
		color: var(--bp-color-error);
	}

	/* ── cqi fluid type ── */
	@container (inline-size > 0) {
		.bp-file-upload__copy {
			font-size: clamp(var(--bp-text-xs), 2cqi, var(--bp-text-sm));
		}
	}

	/* ── Reduced motion ── */
	@media (prefers-reduced-motion: reduce) {
		.bp-file-upload__progress::-webkit-progress-value {
			transition: none;
		}
	}
}