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

@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --datepicker-border:        border (default: 1px solid --bp-color-border)
	 * --datepicker-radius:        border radius (default: --bp-radius-md)
	 * --datepicker-background:            background (default: --bp-color-bg)
	 * --datepicker-color:         text color (default: --bp-color-text)
	 * --datepicker-accent:        calendar accent (default: --bp-primary)
	 * --datepicker-padding:       padding (default: --bp-space-2 --bp-space-3)
	 * --datepicker-height:        input height (default: 2.5rem)
	 */

	.bp-datepicker {
		--_border: var(--datepicker-border, 1px solid var(--bp-color-border));
		--_radius: var(--datepicker-radius, var(--bp-radius-md));
		--_background: var(--datepicker-background, var(--bp-color-bg));
		--_color: var(--datepicker-color, var(--bp-color-text));
		--_accent: var(--datepicker-accent, var(--bp-primary));
		--_padding: var(--datepicker-padding, var(--bp-space-2) var(--bp-space-3));
		--_height: var(--datepicker-height, 2.5rem);

		/* Use accent-color to theme the native calendar popup */
		accent-color: var(--_accent);
		color-scheme: light dark;

		display: block;
		width: 100%;
		height: var(--_height);
		padding: var(--_padding);
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border);
		border-radius: var(--_radius);
		font-family: inherit;
		font-size: var(--bp-text-sm);
		cursor: pointer;

		transition:
			border-color var(--bp-duration-fast) var(--bp-ease),
			box-shadow var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-datepicker:hover {
		border-color: var(--bp-primary);
	}

	.bp-datepicker:focus-visible {
		outline: none;
		border-color: var(--bp-primary);
		box-shadow: var(--bp-focus-ring);
	}

	.bp-datepicker:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.bp-datepicker:invalid:not(:placeholder-shown) {
		border-color: var(--bp-color-error);
	}
}