.wrapper {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.image {
	border-radius: 50%;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.fallback {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: #fff;
}

.statusBadge {
	position: absolute;
	border-radius: 50%;
	border-style: solid;
	/* The badge border matches whatever surface the avatar sits on
	   so it reads as a cut-out from the background. Default targets
	   the sidebar surface (`--background-secondary`), but any parent
	   can override via the `--avatar-status-border` custom property
	   — see MobileYouPage / MobileMemberProfileSheet, where the
	   profile sits on the darker `--background-primary` surface. */
	border-color: var(--avatar-status-border, var(--background-secondary, #2b2d31));
	box-sizing: content-box;
}

.online {
	background: var(--status-online, #23a55a);
}

.idle {
	background: var(--status-idle, #f0b232);
}

.dnd {
	background: var(--status-dnd, #f23f43);
}

.offline {
	background: var(--status-offline, #80848e);
}
