.si-avatar {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 35%;
	transition: all 0.25s ease;
	user-select: none;
	display: inline-block;

	color: hsl(var(--si-text));
	background: hsl(var(--si-color));
	box-shadow: inset 0 0 0 0 hsla(0, 0%, 0%, 0.05);
	vertical-align: middle;
	&.color {
		color: hsl(var(--si-background));
	}
	&__figure {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		overflow: hidden;
		border-radius: inherit;
	}
	&__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 0.25s ease;
	}

	&__default,
	&__text {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&:hover {
		box-shadow: inset 0 0 40px 0 hsla(0, 0%, 0%, 0.1);

		.si-avatar__img {
			transform: scale(1.1);
		}
	}

	& + & {
		margin-left: 0.5em;
	}
}