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

@layer bp-components {
	/**
	 * .bp-modal
	 * Native <dialog> modal — showModal() / close() via minimal JS.
	 * Focus trap is native to <dialog>.
	 * Public API:
	 *   --modal-background       Modal background
	 *   --modal-radius   Border radius
	 *   --modal-padding  Inner padding
	 *   --modal-width    Max width
	 */
	.bp-modal {
		--_background: var(--modal-background, var(--bp-color-bg-elevated));
		--_radius: var(--modal-radius, var(--bp-radius-xl));
		--_padding: var(--modal-padding, var(--bp-space-8));
		--_width: var(--modal-width, 32rem);

		background-color: var(--_background);
		border: 1px solid var(--bp-color-border);
		border-radius: var(--_radius);
		padding: var(--_padding);
		position: fixed;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		width: calc(100vw - var(--bp-space-8));
		max-width: var(--_width);
		max-height: calc(100dvh - var(--bp-space-16));
		overflow-y: auto;
		box-shadow: var(--bp-shadow-xl);
		color: var(--bp-color-text);

		/* Entrance/exit with allow-discrete for display: none ↔ block */
		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			transform var(--bp-duration-normal) var(--bp-ease),
			display var(--bp-duration-normal) var(--bp-ease) allow-discrete,
			overlay var(--bp-duration-normal) var(--bp-ease) allow-discrete;
	}

	.bp-modal[open] {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	@starting-style {
		.bp-modal[open] {
			opacity: 0;
			transform: translateY(1rem) scale(0.97);
		}
	}

	/* Backdrop */
	.bp-modal::backdrop {
		background-color: rgb(0 0 0 / 0.5);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);

		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			display var(--bp-duration-normal) var(--bp-ease) allow-discrete,
			overlay var(--bp-duration-normal) var(--bp-ease) allow-discrete;
	}

	@starting-style {
		.bp-modal[open]::backdrop {
			opacity: 0;
		}
	}

	.bp-modal__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--bp-space-4);
		margin-bottom: var(--bp-space-6);
	}

	.bp-modal__title {
		font-size: var(--bp-text-xl);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text);
	}

	.bp-modal__close {
		display: grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		background: none;
		border: none;
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text-muted);
		cursor: pointer;
		flex-shrink: 0;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-modal__close:hover {
		background-color: var(--bp-color-bg-subtle);
		color: var(--bp-color-text);
	}

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

	.bp-modal__body {
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-normal);
	}

	.bp-modal__footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--bp-space-3);
		margin-top: var(--bp-space-8);
		padding-top: var(--bp-space-6);
		border-top: 1px solid var(--bp-color-border);
	}

	/* Modal is its own container for internal cqi scaling */
	.bp-modal {
		container-type: inline-size;
	}

	@container (inline-size > 0) {
		.bp-modal__title {
			font-size: clamp(var(--bp-text-base), 5cqi, var(--bp-text-xl));
		}
		.bp-modal__body {
			font-size: clamp(var(--bp-text-sm), 3.5cqi, var(--bp-text-base));
		}
	}
}