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

@layer bp-components {
	/**
	 * .bp-badge
	 * Inline label for status, counts, and categories.
	 * Public API:
	 *   --badge-background       Background color
	 *   --badge-color    Text color
	 *   --badge-border   Border (default: transparent)
	 *   --badge-radius   Border radius
	 */
	.bp-badge {
		--_background: var(--badge-background, var(--bp-primary-subtle));
		--_color: var(--badge-color, var(--bp-primary-fg));
		--_border: var(--badge-border, 1px solid transparent);
		--_radius: var(--badge-radius, var(--bp-radius-full));

		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-1);
		padding: 0.2em 0.6em;
		background-color: var(--_background);
		color: var(--_color);
		border: var(--_border);
		border-radius: var(--_radius);
		font-size: var(--bp-text-xs);
		font-weight: var(--bp-font-weight-semibold);
		line-height: 1.4;
		white-space: nowrap;
		vertical-align: middle;
	}

	/* ── Semantic solid variants ── */
	.bp-badge--primary {
		--badge-background: var(--bp-primary);
		--badge-color: var(--bp-primary-fg);
	}

	.bp-badge--success {
		--badge-background: var(--bp-color-success);
		--badge-color: color-mix(in srgb, var(--bp-color-success) 20%, black);
	}

	.bp-badge--warning {
		--badge-background: var(--bp-color-warning);
		--badge-color: color-mix(in srgb, var(--bp-color-warning) 20%, black);
	}

	.bp-badge--error {
		--badge-background: var(--bp-color-error);
		--badge-color: #fff;
	}

	.bp-badge--info {
		--badge-background: var(--bp-color-info);
		--badge-color: #fff;
	}

	.bp-badge--neutral {
		--badge-background: var(--bp-color-bg-subtle);
		--badge-color: var(--bp-color-text-muted);
	}

	/* ── Style modifier: subtle ──
     Low-opacity tinted background, colored text.
     Combine with a semantic variant: bp-badge--success bp-badge--subtle */
	.bp-badge--subtle.bp-badge--primary {
		--badge-background: var(--bp-primary-subtle);
		--badge-color: var(--bp-primary-fg);
	}

	.bp-badge--subtle.bp-badge--success {
		--badge-background: color-mix(in srgb, var(--bp-color-success) 15%, transparent);
		--badge-color: var(--bp-color-success);
	}

	.bp-badge--subtle.bp-badge--warning {
		--badge-background: color-mix(in srgb, var(--bp-color-warning) 15%, transparent);
		--badge-color: var(--bp-color-warning);
	}

	.bp-badge--subtle.bp-badge--error {
		--badge-background: color-mix(in srgb, var(--bp-color-error) 15%, transparent);
		--badge-color: var(--bp-color-error);
	}

	.bp-badge--subtle.bp-badge--info {
		--badge-background: color-mix(in srgb, var(--bp-color-info) 15%, transparent);
		--badge-color: var(--bp-color-info);
	}

	.bp-badge--subtle.bp-badge--neutral {
		--badge-background: color-mix(in srgb, var(--bp-color-text-muted) 12%, transparent);
		--badge-color: var(--bp-color-text-muted);
	}

	/* ── Style modifier: outline ──
     Transparent background, colored border + text.
     Combine with a semantic variant: bp-badge--error bp-badge--outline */
	.bp-badge--outline {
		--badge-background: transparent;
	}

	.bp-badge--outline.bp-badge--primary {
		--badge-border: 1px solid var(--bp-primary);
		--badge-color: var(--bp-primary);
	}

	.bp-badge--outline.bp-badge--success {
		--badge-border: 1px solid var(--bp-color-success);
		--badge-color: var(--bp-color-success);
	}

	.bp-badge--outline.bp-badge--warning {
		--badge-border: 1px solid var(--bp-color-warning);
		--badge-color: var(--bp-color-warning);
	}

	.bp-badge--outline.bp-badge--error {
		--badge-border: 1px solid var(--bp-color-error);
		--badge-color: var(--bp-color-error);
	}

	.bp-badge--outline.bp-badge--info {
		--badge-border: 1px solid var(--bp-color-info);
		--badge-color: var(--bp-color-info);
	}

	.bp-badge--outline.bp-badge--neutral {
		--badge-border: 1px solid var(--bp-color-border);
		--badge-color: var(--bp-color-text-muted);
	}

	/* ── Dot indicator ──
     Status dot inside the badge. Color inherits from the semantic variant.
     Usage: <span class="bp-badge bp-badge--success">
              <span class="bp-badge__dot" aria-hidden="true"></span>Active
            </span> */
	.bp-badge__dot {
		display: inline-block;
		width: 0.45em;
		height: 0.45em;
		border-radius: var(--bp-radius-full);
		background-color: currentColor;
		flex-shrink: 0;
	}

	/* ── Size modifier: lg ──
     Slightly larger for standalone / prominent use. */
	.bp-badge--lg {
		font-size: var(--bp-text-sm);
		padding: 0.3em 0.75em;
	}
}