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

@layer bp-components {
	/**
	 * #bp-toast-region
	 * Fixed stack container — bottom-right, isolated stacking context.
	 * Created lazily by bp-toast.js; do not place manually.
	 */
	#bp-toast-region {
		position: fixed;
		bottom: var(--bp-space-6);
		right: var(--bp-space-6);
		display: flex;
		flex-direction: column-reverse;
		gap: var(--bp-space-2);
		isolation: isolate;
		list-style: none;
		margin: 0;
		padding: 0;
		pointer-events: none;
		width: var(--toast-width, 22rem);
		max-width: calc(100vw - var(--bp-space-8));
		z-index: 1000;
	}

	/**
	 * .bp-toast
	 * Individual notification item.
	 * Public API:
	 *   --toast-background       Background override
	 *   --toast-color    Text color override
	 *   --toast-border   Border color override (default: transparent)
	 *   --toast-width    Max width (set on region)
	 *   --toast-radius   Border radius
	 */
	.bp-toast {
		--_background: var(--toast-background, var(--bp-color-bg-elevated));
		--_color: var(--toast-color, var(--bp-color-text));
		--_radius: var(--toast-radius, var(--bp-radius-lg));
		--_border: var(--toast-border, transparent);

		display: flex;
		align-items: flex-start;
		gap: var(--bp-space-3);
		padding: var(--bp-space-4);
		background-color: var(--_background);
		color: var(--_color);
		border: 1px solid var(--_border);
		border-radius: var(--_radius);
		box-shadow: var(--bp-shadow-lg);
		pointer-events: auto;
		container-type: inline-size;

		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			transform var(--bp-duration-normal) var(--bp-ease-spring); /* spring for slide feel */
	}

	@starting-style {
		.bp-toast {
			opacity: 0;
			transform: translateY(0.75rem) scale(0.97);
		}
	}

	.bp-toast.is-dismissing {
		opacity: 0;
		transform: translateY(0.5rem) scale(0.97);
		pointer-events: none;
	}

	/* ── Semantic variants ── */
	.bp-toast--success {
		--toast-background: color-mix(in srgb, var(--bp-color-success) 12%, var(--bp-color-bg-elevated));
		--_border: color-mix(in srgb, var(--bp-color-success) 30%, transparent);
	}

	.bp-toast--error {
		--toast-background: color-mix(in srgb, var(--bp-color-error) 12%, var(--bp-color-bg-elevated));
		--_border: color-mix(in srgb, var(--bp-color-error) 30%, transparent);
	}

	.bp-toast--warning {
		--toast-background: color-mix(in srgb, var(--bp-color-warning) 12%, var(--bp-color-bg-elevated));
		--_border: color-mix(in srgb, var(--bp-color-warning) 30%, transparent);
	}

	.bp-toast--info {
		--toast-background: color-mix(in srgb, var(--bp-color-info) 12%, var(--bp-color-bg-elevated));
		--_border: color-mix(in srgb, var(--bp-color-info) 30%, transparent);
	}

	/* ── Sub-elements ── */
	.bp-toast__icon {
		font-size: var(--bp-text-lg);
		line-height: 1;
		flex-shrink: 0;
		margin-top: 1px;
	}

	.bp-toast__body {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-2);
	}

	.bp-toast__message {
		margin: 0;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text);
		line-height: var(--bp-leading-normal);
	}

	.bp-toast__action {
		align-self: flex-start;
		background: none;
		border: none;
		padding: 0;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-primary);
		cursor: pointer;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.bp-toast__action:hover {
		color: var(--bp-primary-hover, var(--bp-primary));
		text-decoration: none;
	}

	.bp-toast__action:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		border-radius: var(--bp-radius-sm);
	}

	.bp-toast__close {
		display: grid;
		place-items: center;
		width: 1.75rem;
		height: 1.75rem;
		flex-shrink: 0;
		background: none;
		border: none;
		border-radius: var(--bp-radius-md);
		color: var(--bp-color-text-muted);
		cursor: pointer;
		font-size: var(--bp-text-base);
		line-height: 1;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease);
		margin-top: -2px;
	}

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

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