/*!
 * @be-partner-labs/ds v1.8.0 — components/input
 * © 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/input.min.css">
 * npm:  @import "@be-partner-labs/ds/components/input";
 * Docs: https://ds.bepartnerlabs.com/components/input/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/**
	 * .bp-field
	 * Wrapper for label + input + hint.
	 *
	 * .bp-input
	 * Public API:
	 *   --input-background       Background color
	 *   --input-color    Text color
	 *   --input-radius   Border radius
	 *   --input-padding  Inner padding
	 *   --input-border   Border
	 */
	.bp-field {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-2);
	}

	.bp-field__label {
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text);
	}

	.bp-field__hint {
		font-size: var(--bp-text-xs);
		color: var(--bp-color-text-muted);
	}

	.bp-field__error {
		font-size: var(--bp-text-xs);
		color: var(--bp-color-error);
	}

	.bp-input {
		--_background: var(--input-background, var(--bp-color-bg-elevated));
		--_color: var(--input-color, var(--bp-color-text));
		--_radius: var(--input-radius, var(--bp-radius-md));
		--_padding: var(--input-padding, var(--bp-space-3) var(--bp-space-4));
		--_border: var(--input-border, 1px solid var(--bp-color-border));

		display: block;
		width: 100%;
		padding: var(--_padding);
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border);
		border-radius: var(--_radius);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-normal);
		transition: border-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-input::placeholder {
		color: var(--bp-color-text-muted);
		opacity: 0.7;
	}

	.bp-input:hover {
		--input-border: 1px solid var(--bp-color-text-muted);
	}

	.bp-input:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		--input-border: 1px solid var(--bp-primary);
	}

	.bp-input[aria-invalid='true'],
	.bp-input:invalid:not(:placeholder-shown) {
		--input-border: 1px solid var(--bp-color-error);
	}

	.bp-input[data-state='success'] {
		--input-border: 1px solid var(--bp-color-success);
	}

	.bp-input[aria-busy='true'] {
		--input-border: 1px solid var(--bp-color-border);
		cursor: wait;
		pointer-events: none;
	}

	.bp-input:disabled {
		cursor: not-allowed;
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-color-text-muted);
	}

	/* Icon slot — success check, error mark, or .bp-spinner for loading */
	.bp-field__control {
		position: relative;
		display: flex;
	}

	.bp-field__icon {
		position: absolute;
		top: 50%;
		right: var(--bp-space-3);
		transform: translateY(-50%);
		display: flex;
		pointer-events: none;
		color: var(--bp-color-text-muted);
	}

	.bp-input[data-state='success'] ~ .bp-field__icon {
		color: var(--bp-color-success);
	}

	.bp-input[aria-invalid='true'] ~ .bp-field__icon {
		color: var(--bp-color-error);
	}

	.bp-field__control:has(.bp-field__icon) .bp-input {
		padding-right: var(--bp-space-8);
	}

	/* Textarea variant */
	textarea.bp-input {
		resize: vertical;
		min-height: 6rem;
		field-sizing: content;
	}

	/* cqi fluid type — label, hint, input text scale with container */
	@container (inline-size > 0) {
		.bp-field__label {
			font-size: clamp(var(--bp-text-xs), 2cqi, var(--bp-text-sm));
		}
		.bp-field__hint,
		.bp-field__error {
			font-size: clamp(var(--bp-text-xs), 1.6cqi, var(--bp-text-xs));
		}
		.bp-input {
			font-size: clamp(var(--bp-text-sm), 2.5cqi, var(--bp-text-base));
		}
	}
}