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

@layer bp-components {
	/**
	 * .bp-btn
	 * Public API:
	 *   --btn-background    Button background color
	 *   --btn-color         Button text color
	 *   --btn-border-radius Border radius
	 *   --btn-padding       Padding shorthand
	 *   --btn-border        Border (default: none)
	 */
	.bp-btn {
		--_background: var(--btn-background, var(--bp-primary));
		--_color: var(--btn-color, var(--bp-primary-fg));
		--_border-radius: var(--btn-border-radius, var(--bp-radius-md));
		--_padding: var(--btn-padding, var(--bp-space-3) var(--bp-space-6));
		--_border: var(--btn-border, none);

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--bp-space-2);
		padding: var(--_padding);
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border);
		border-radius: var(--_border-radius);
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-semibold);
		line-height: 1;
		cursor: pointer;
		text-decoration: none;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease),
			box-shadow var(--bp-duration-fast) var(--bp-ease),
			transform var(--bp-duration-fast) var(--bp-ease);
		white-space: nowrap;
		user-select: none;
	}

	.bp-btn:hover {
		--_background: var(--bp-primary-hover);
	}

	.bp-btn:active {
		transform: translateY(1px);
	}

	.bp-btn:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* --- Variant: secondary --- */
	.bp-btn--secondary {
		--btn-background: var(--bp-color-bg-subtle);
		--btn-color: var(--bp-color-text);
		--btn-border: 1px solid var(--bp-color-border);
	}

	.bp-btn--secondary:hover {
		--_background: var(--bp-color-bg-elevated);
	}

	/* --- Variant: ghost --- */
	.bp-btn--ghost {
		--btn-background: transparent;
		--btn-color: var(--bp-primary);
	}

	.bp-btn--ghost:hover {
		--_background: var(--bp-primary-subtle);
	}

	/* --- Variant: danger --- */
	.bp-btn--danger {
		--btn-background: var(--bp-color-error-surface);
		--btn-color: #fff;
	}

	/* --- Variant: icon-only --- */
	.bp-btn--icon {
		--btn-padding: var(--bp-space-3);
		aspect-ratio: 1;
	}

	/* --- Size modifier: sm --- */
	.bp-btn--sm {
		--btn-padding: var(--bp-space-2) var(--bp-space-4);
		font-size: var(--bp-text-sm);
	}

	/* --- Size modifier: lg --- */
	.bp-btn--lg {
		--btn-padding: var(--bp-space-4) var(--bp-space-8);
		font-size: var(--bp-text-lg);
	}

	.bp-btn:disabled,
	.bp-btn[aria-disabled='true'] {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	/* --- Container query responses --- */

	/* cqi fluid font size */
	@container (inline-size > 0) {
		.bp-btn:not(.bp-btn--sm):not(.bp-btn--lg):not(.bp-btn--icon) {
			font-size: clamp(var(--bp-text-sm), 2cqi, var(--bp-text-base));
		}
	}

	/* Narrow container: fill full width */
	@container (max-width: 20rem) {
		.bp-btn:not(.bp-btn--icon) {
			width: 100%;
			justify-content: center;
		}
	}

	/* Very narrow container: compact padding */
	@container (max-width: 14rem) {
		.bp-btn:not(.bp-btn--icon):not(.bp-btn--lg) {
			--btn-padding: var(--bp-space-2) var(--bp-space-4);
		}
	}
}