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

@layer bp-components {
	/**
	 * .bp-alert
	 * Inline feedback message for persistent contextual notices.
	 * Public API:
	 *   --alert-background             Background (color-mix tint)
	 *   --alert-color          Text color
	 *   --alert-border-color   Border color
	 *   --alert-border-width   Border width (default: 1px)
	 *   --alert-border-radius  Border radius
	 *   --alert-padding-x      Horizontal padding
	 *   --alert-padding-y      Vertical padding
	 *   --alert-gap            Gap between icon, content, and close button
	 *   --alert-accent-width   Left stripe width (default: 4px)
	 *   --alert-accent-color   Left stripe color
	 *   --alert-title-size     Font size of title
	 *   --alert-body-size      Font size of body
	 */
	.bp-alert {
		--_background: var(--alert-background, var(--bp-color-bg-subtle));
		--_color: var(--alert-color, var(--bp-color-text));
		--_border-color: var(--alert-border-color, var(--bp-color-border));
		--_border-width: var(--alert-border-width, 1px);
		--_border-radius: var(--alert-border-radius, var(--bp-radius-md));
		--_padding-x: var(--alert-padding-x, var(--bp-space-4));
		--_padding-y: var(--alert-padding-y, var(--bp-space-3));
		--_gap: var(--alert-gap, var(--bp-space-3));
		--_accent-width: var(--alert-accent-width, 4px);
		--_accent-color: var(--alert-accent-color, var(--_border-color));

		position: relative;
		display: flex;
		align-items: flex-start;
		gap: var(--_gap);
		padding: var(--_padding-y) var(--_padding-x);
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border-width) solid var(--_border-color);
		border-radius: var(--_border-radius);
		container-type: inline-size;
	}

	/* ── Dismissed state ── */
	.bp-alert[hidden] {
		display: none;
	}

	/* ── Semantic variants ── */
	.bp-alert--info {
		--alert-background: color-mix(in srgb, var(--bp-color-info) 12%, transparent);
		--alert-border-color: color-mix(in srgb, var(--bp-color-info) 30%, transparent);
		--alert-accent-color: var(--bp-color-info);
	}

	.bp-alert--success {
		--alert-background: color-mix(in srgb, var(--bp-color-success) 12%, transparent);
		--alert-border-color: color-mix(in srgb, var(--bp-color-success) 30%, transparent);
		--alert-accent-color: var(--bp-color-success);
	}

	.bp-alert--warning {
		--alert-background: color-mix(in srgb, var(--bp-color-warning) 12%, transparent);
		--alert-border-color: color-mix(in srgb, var(--bp-color-warning) 30%, transparent);
		--alert-accent-color: var(--bp-color-warning);
	}

	.bp-alert--error {
		--alert-background: color-mix(in srgb, var(--bp-color-error) 12%, transparent);
		--alert-border-color: color-mix(in srgb, var(--bp-color-error) 30%, transparent);
		--alert-accent-color: var(--bp-color-error);
	}

	/* ── Accent stripe modifier ──
     Renders a colored left border stripe via ::before.
     Combine with a semantic variant: bp-alert--info bp-alert--accent */
	.bp-alert--accent {
		border-left-color: transparent;
		padding-left: calc(var(--_padding-x) + var(--_accent-width));
	}

	.bp-alert--accent::before {
		content: '';
		position: absolute;
		inset-block: 0;
		left: 0;
		width: var(--_accent-width);
		background-color: var(--_accent-color);
		border-radius: var(--_border-radius) 0 0 var(--_border-radius);
	}

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

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

	.bp-alert__title {
		margin: 0;
		font-size: var(--alert-title-size, var(--bp-text-sm));
		font-weight: var(--bp-font-weight-semibold);
		color: var(--_color);
		line-height: var(--bp-leading-normal);
	}

	.bp-alert__body {
		margin: 0;
		font-size: var(--alert-body-size, var(--bp-text-sm));
		color: var(--bp-color-text-muted);
		line-height: var(--bp-leading-normal);
	}

	/* ── Close button ── */
	.bp-alert__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;
		margin-right: -4px;
	}

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

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