/*------------------------------------------------------------
	Avatar (square, rounded, or circular image)
------------------------------------------------------------*/

.st-avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--st-avatar-size, 4rem);
	height: var(--st-avatar-size, 4rem);
	overflow: hidden;
	background-color: var(--st-color--gray-200);
}

.st-avatar__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.st-avatar--squared {
	border-radius: 0;
}

.st-avatar--rounded {
	border-radius: var(--st-radius--md);
}

.st-avatar--circle {
	border-radius: 50%;
}