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

@layer bp-components {
	/**
	 * .bp-avatar
	 * Circular user avatar rendered on a native <img>.
	 * Supports image, CSS-only initials fallback, size variants, and avatar groups.
	 * Public API:
	 *   --avatar-size           Width and height of the avatar
	 *   --avatar-radius         Border radius (circle by default)
	 *   --avatar-font-size      Initials text size
	 *   --avatar-font-weight    Initials text weight
	 *   --avatar-background             Fallback background color
	 *   --avatar-color          Initials text color
	 *   --avatar-border-width   Ring width (used in groups)
	 *   --avatar-border-color   Ring color (used in groups)
	 *   --avatar-group-overlap  Negative margin for stacking in groups
	 *   --avatar-overflow-background    Background for overflow count avatar
	 *   --avatar-overflow-color Text color for overflow count avatar
	 */
	.bp-avatar {
		--_size: var(--avatar-size, 2.5rem);
		--_radius: var(--avatar-radius, 9999px);
		--_font-size: var(--avatar-font-size, calc(var(--avatar-size, 2.5rem) * 0.4));
		--_font-weight: var(--avatar-font-weight, 600);
		--_background: var(--avatar-background, var(--bp-color-neutral-200, #e5e7eb));
		--_color: var(--avatar-color, var(--bp-color-neutral-700, #374151));
		--_border-width: var(--avatar-border-width, 2px);
		--_border-color: var(--avatar-border-color, var(--bp-color-bg, #fff));

		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--_size);
		height: var(--_size);
		border-radius: var(--_radius);
		background-color: var(--_background);
		color: var(--_color);
		font-size: var(--_font-size);
		font-weight: var(--_font-weight);
		font-family: inherit;
		line-height: 1;
		object-fit: cover;
		flex-shrink: 0;
		vertical-align: middle;
		text-align: center;
	}

	/* ── Size variants ── */
	.bp-avatar--xs {
		--avatar-size: 1.5rem;
	}

	.bp-avatar--sm {
		--avatar-size: 2rem;
	}

	.bp-avatar--lg {
		--avatar-size: 3rem;
	}

	.bp-avatar--xl {
		--avatar-size: 4rem;
	}

	/* ── Shape modifier ── */
	.bp-avatar--square {
		--avatar-radius: 0.375rem;
	}

	/* ── Avatar group ── */
	.bp-avatar-group {
		display: inline-flex;
		flex-direction: row;
		isolation: isolate;
	}

	.bp-avatar-group .bp-avatar {
		margin-inline-start: var(--avatar-group-overlap, -0.75rem);
		box-sizing: content-box;
		border: var(--_border-width) solid var(--_border-color);
	}

	.bp-avatar-group .bp-avatar:first-child {
		margin-inline-start: 0;
	}

	/* ── Overflow count avatar ── */
	.bp-avatar--overflow {
		--avatar-background: var(--avatar-overflow-background, var(--bp-color-neutral-300, #d1d5db));
		--avatar-color: var(--avatar-overflow-color, var(--bp-color-neutral-800, #1f2937));
	}
}