/**
 * Primitive — Avatar
 *
 * Expected HTML:
 *   Image:    <span class="ec-avatar ec-avatar--md"><img src="..." alt="..."></span>
 *   Initials: <span class="ec-avatar ec-avatar--md">AL</span>
 */

:root {
	--ec-avatar-size-sm: 2rem;    /* 32px */
	--ec-avatar-size-md: 2.75rem; /* 44px */
	--ec-avatar-size-lg: 3.5rem;  /* 56px */
}

.ec-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	border-radius: var(--ec-radius-full);
	background-color: var(--ec-color-surface-elevated);
	color: var(--ec-color-text-secondary);
	font-family: var(--ec-font-family-base);
	font-weight: var(--ec-font-weight-semibold);
}

.ec-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ec-avatar--sm {
	width: var(--ec-avatar-size-sm);
	height: var(--ec-avatar-size-sm);
	font-size: var(--ec-font-size-caption);
}

.ec-avatar--md {
	width: var(--ec-avatar-size-md);
	height: var(--ec-avatar-size-md);
	font-size: var(--ec-font-size-body-sm);
}

.ec-avatar--lg {
	width: var(--ec-avatar-size-lg);
	height: var(--ec-avatar-size-lg);
	font-size: var(--ec-font-size-body);
}