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

@layer bp-components {
	/**
	 * .bp-toggle
	 * A styled checkbox switch using role="switch".
	 *
	 * Public API:
	 *   --toggle-track-background   Track color (re-declare in :checked for checked state)
	 *   --toggle-track-radius      Track border radius
	 *   --toggle-track-width       Track width
	 *   --toggle-track-height      Track height
	 *   --toggle-thumb-background   Thumb fill color
	 *   --toggle-thumb-size        Thumb diameter
	 *   --toggle-thumb-shadow      Thumb drop shadow
	 *   --toggle-duration          Transition duration
	 *   --toggle-label-color       Label text color
	 *   --toggle-label-gap         Gap between track and label
	 *   --toggle-disabled-opacity  Opacity when disabled
	 */
	.bp-toggle {
		--_track-background: var(--toggle-track-background, var(--bp-color-border));
		--_track-radius: var(--toggle-track-radius, var(--bp-radius-full));
		--_track-width: var(--toggle-track-width, 2.75rem);
		--_track-height: var(--toggle-track-height, 1.5rem);
		--_thumb-background: var(--toggle-thumb-background, #fff);
		--_thumb-size: var(--toggle-thumb-size, 1.125rem);
		--_thumb-shadow: var(--toggle-thumb-shadow, var(--bp-shadow-sm));
		--_duration: var(--toggle-duration, var(--bp-duration-fast));
		--_label-color: var(--toggle-label-color, var(--bp-color-text));
		--_label-gap: var(--toggle-label-gap, var(--bp-space-3));
		--_disabled-opacity: var(--toggle-disabled-opacity, 0.45);

		display: inline-flex;
		align-items: center;
		gap: var(--_label-gap);
		cursor: pointer;
		user-select: none;
	}

	/* Visually hidden input — stays in tab order */
	.bp-toggle__input {
		opacity: 0;
		position: absolute;
		width: 0;
		height: 0;
		margin: 0;
	}

	.bp-toggle__track {
		position: relative;
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		width: var(--_track-width);
		height: var(--_track-height);
		background-color: var(--_track-background);
		border-radius: var(--_track-radius);
		transition: background-color var(--_duration) var(--bp-ease);
	}

	.bp-toggle__thumb {
		position: absolute;
		/* padding = (track-height - thumb-size) / 2 */
		left: calc((var(--_track-height) - var(--_thumb-size)) / 2);
		width: var(--_thumb-size);
		height: var(--_thumb-size);
		background-color: var(--_thumb-background);
		border-radius: var(--bp-radius-full);
		box-shadow: var(--_thumb-shadow);
		transition: transform var(--_duration) var(--bp-ease);
	}

	/* Checked state — track color */
	.bp-toggle__input:checked + .bp-toggle__track {
		--toggle-track-background: var(--bp-primary);
		background-color: var(--toggle-track-background);
	}

	/* Checked state — thumb translates right */
	.bp-toggle__input:checked + .bp-toggle__track .bp-toggle__thumb {
		transform: translateX(
			calc(var(--_track-width) - var(--_thumb-size) - (var(--_track-height) - var(--_thumb-size)))
		);
	}

	/* Focus ring on track when input is focused */
	.bp-toggle__input:focus-visible + .bp-toggle__track {
		outline: 2px solid var(--bp-primary);
		outline-offset: 2px;
	}

	/* Label text */
	.bp-toggle__label {
		font-size: var(--bp-text-base);
		color: var(--_label-color);
		line-height: var(--bp-leading-normal);
	}

	/* Disabled state */
	.bp-toggle__input:disabled + .bp-toggle__track {
		opacity: var(--_disabled-opacity);
	}

	.bp-toggle:has(.bp-toggle__input:disabled) {
		cursor: not-allowed;
		opacity: var(--_disabled-opacity);
	}

	/* Small variant */
	.bp-toggle--sm {
		--toggle-track-width: 2rem;
		--toggle-track-height: 1.125rem;
		--toggle-thumb-size: 0.75rem;
	}

	.bp-toggle--sm .bp-toggle__label {
		font-size: var(--bp-text-sm);
	}

	/* Large variant */
	.bp-toggle--lg {
		--toggle-track-width: 3.5rem;
		--toggle-track-height: 2rem;
		--toggle-thumb-size: 1.5rem;
	}

	.bp-toggle--lg .bp-toggle__label {
		font-size: var(--bp-text-lg);
	}

	/* Reduced motion */
	@media (prefers-reduced-motion: reduce) {
		.bp-toggle__track,
		.bp-toggle__thumb {
			transition: none;
		}
	}
}