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

@layer bp-components {
	/**
	 * .bp-checkbox
	 * Label wrapper for a native checkbox input with optional label text.
	 *
	 * .bp-checkbox-field
	 * Wrapper for a checkbox + error message.
	 *
	 * .bp-checkbox-group
	 * Fieldset wrapper for a group of checkboxes (stacked or inline).
	 *
	 * Public API:
	 *   --checkbox-size              Control box width/height
	 *   --checkbox-radius            Control border radius
	 *   --checkbox-border            Unchecked border
	 *   --checkbox-background                Unchecked background
	 *   --checkbox-color             Checked/indeterminate fill color
	 *   --checkbox-check-color       Checkmark/dash color
	 *   --checkbox-gap               Control-to-label gap
	 *   --checkbox-label-color       Label text color
	 *   --checkbox-error-color       Error border/text color
	 *   --checkbox-group-gap         Stacked group gap
	 *   --checkbox-group-inline-gap  Inline group gap
	 */
	.bp-checkbox {
		--_size: var(--checkbox-size, 1.125rem);
		--_radius: var(--checkbox-radius, var(--bp-radius-sm));
		--_border: var(--checkbox-border, 1px solid var(--bp-color-border));
		--_background: var(--checkbox-background, var(--bp-color-bg-elevated));
		--_color: var(--checkbox-color, var(--bp-primary));
		--_check-color: var(--checkbox-check-color, #fff);
		--_gap: var(--checkbox-gap, var(--bp-space-2));
		--_label-color: var(--checkbox-label-color, var(--bp-color-text));

		display: inline-flex;
		align-items: center;
		gap: var(--_gap);
		cursor: pointer;
		color: var(--_label-color);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-normal);
	}

	.bp-checkbox__input {
		appearance: none;
		-webkit-appearance: none;
		flex-shrink: 0;
		width: var(--_size);
		height: var(--_size);
		border: var(--_border);
		border-radius: var(--_radius);
		background-color: var(--_background);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 70%;
		cursor: pointer;
		transition:
			border-color var(--bp-duration-fast) var(--bp-ease),
			background-color var(--bp-duration-fast) var(--bp-ease),
			box-shadow var(--bp-duration-fast) var(--bp-ease);
	}

	/* ── Checked state ── */
	.bp-checkbox__input:checked {
		background-color: var(--_color);
		border-color: var(--_color);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/* ── Indeterminate state ── */
	.bp-checkbox__input:indeterminate {
		background-color: var(--_color);
		border-color: var(--_color);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 6h6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	/* ── Focus visible ── */
	.bp-checkbox__input:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* ── Disabled state ── */
	.bp-checkbox__input:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.bp-checkbox:has(.bp-checkbox__input:disabled) {
		opacity: 0.5;
		cursor: not-allowed;
	}

	/* ── Error state ── */
	.bp-checkbox__input[aria-invalid='true'] {
		--checkbox-border: 1px solid var(--checkbox-error-color, var(--bp-color-error));
	}

	/* ── Field wrapper ── */
	.bp-checkbox-field {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);
	}

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

	/* ── Group ── */
	.bp-checkbox-group {
		border: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--checkbox-group-gap, var(--bp-space-3));
	}

	.bp-checkbox-group__legend {
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text);
		margin-bottom: var(--bp-space-2);
		padding: 0;
	}

	/* ── Group inline modifier ── */
	.bp-checkbox-group--inline {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--checkbox-group-inline-gap, var(--bp-space-4));
	}
}