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

@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --breadcrumb-separator: "/"     separator character
	 * --breadcrumb-color:             link color (default: --bp-color-text-muted)
	 * --breadcrumb-gap:               space between items (default: --bp-space-2)
	 * --breadcrumb-size:              font size (default: --bp-text-sm)
	 *
	 * Active/hover color: re-declare --breadcrumb-color in your own state selector.
	 */

	/* ─── Root ───────────────────────────────────────────────── */
	.bp-breadcrumb {
		--_separator: var(--breadcrumb-separator, "/");
		--_color: var(--breadcrumb-color, var(--bp-color-text-muted));
		--_gap: var(--breadcrumb-gap, var(--bp-space-2));
		--_size: var(--breadcrumb-size, var(--bp-text-sm));

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--_gap);
		font-size: var(--_size);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* ─── Items ──────────────────────────────────────────────── */
	.bp-breadcrumb__item {
		display: flex;
		align-items: center;
		gap: var(--_gap);
	}

	.bp-breadcrumb__item:not(:last-child)::after {
		content: var(--_separator) / "";
		color: var(--bp-color-text-muted);
	}

	/* ─── Links ──────────────────────────────────────────────── */
	.bp-breadcrumb__link {
		color: var(--_color);
		text-decoration: none;
	}

	.bp-breadcrumb__link:hover {
		text-decoration: underline;
		--breadcrumb-color: var(--bp-color-text);
	}

	.bp-breadcrumb__link:focus-visible {
		outline: 2px solid var(--bp-primary);
		outline-offset: 2px;
		border-radius: var(--bp-radius-sm);
	}

	/* ─── Current page ───────────────────────────────────────── */
	.bp-breadcrumb__item[aria-current="page"] .bp-breadcrumb__link,
	.bp-breadcrumb__item:last-child .bp-breadcrumb__link {
		--breadcrumb-color: var(--bp-color-text);
		font-weight: var(--bp-font-medium);
		pointer-events: none;
	}
}