.bx-call-user-list-component-scope {
	--call-user-list-avatar-border-color: #9B83F5;
	--call-user-list-avatar-border-color-active: #A8A6F9;

	--call-user-list-avatar-border-color-new: #8E76E6;
	--call-user-list-avatar-border-color-active-new: #A8A6F9;
}

.bx-call-user-list-component {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 3px 8px;
	background: rgba(var(--ui-color-palette-white-base-rgb), 0.2);
	border-radius: 8px;
	height: 33px;
	min-width: 50px;
	cursor: pointer;
	transition: 0.25s ease-in-out background, border;
}

.bx-call-user-list-component.--border {
	padding: 5px 8px;
	border-radius: 29px;
	border: 1px solid rgba(var(--ui-color-palette-white-base-rgb), 0.24);
	background: rgba(var(--ui-color-palette-white-base-rgb), 0.14);
}

.bx-call-user-list-component:hover {
	background: rgba(var(--ui-color-palette-white-base-rgb), 0.24);
}

.bx-call-user-list-component.--border:hover {
	background: rgba(var(--ui-color-palette-white-base-rgb), 0.24);
	border: 1px solid rgba(var(--ui-color-palette-white-base-rgb), 0.34);
}

.bx-call-user-list-component__icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.036 10.417c-2.977 0-3.677-4.26-1.569-5.765.35-.25 1.023-.485 1.57-.485 3.882 0 3.574 6.25 0 6.25zm-.988-4.951c.068-.048.222-.13.436-.198.21-.068.41-.101.552-.101.671 0 1.088.255 1.355.595.29.368.457.908.442 1.505-.015.596-.209 1.157-.522 1.547a1.557 1.557 0 01-1.275.603c-.894 0-1.504-.604-1.716-1.539-.221-.977.09-1.956.728-2.412z'/%3E%3Cpath d='M6.663 5.604l.062.001c-.13.33-.218.677-.265 1.027a1.52 1.52 0 00-.126.036c-.142.046-.231.097-.254.114-.375.273-.602.91-.45 1.594.144.645.53.978 1.033.978.047 0 .092-.002.135-.008.107.411.211.796.259.972a2.075 2.075 0 01-.394.036c-2.222 0-2.744-3.237-1.171-4.38.261-.19.763-.37 1.17-.37zM4.233 11.33c.602-.378 1.313-.54 1.989-.586a.651.651 0 01-.114.38c-.129.177-.315.378-.525.606l-.14.153c-.247.07-.476.167-.678.294-.441.277-.79.721-.897 1.469h.315c-.14.311-.24.644-.28 1h-.257a.797.797 0 01-.8-.85c.087-1.188.623-1.986 1.387-2.466zM13.382 5.605c2.842.056 2.599 4.75-.053 4.75-.139 0-.271-.013-.397-.037.03-.137.103-.376.191-.666l.092-.304c.038.004.076.006.114.006a.897.897 0 00.748-.361c.197-.25.33-.625.34-1.038.01-.413-.105-.769-.281-.997a.859.859 0 00-.502-.321c-.042-.35-.125-.7-.252-1.032zM16.355 14.646h-.258a3.297 3.297 0 00-.279-1h.316c-.107-.748-.457-1.192-.898-1.469a2.624 2.624 0 00-.678-.294l-.14-.153c-.21-.228-.396-.43-.525-.606a.692.692 0 01-.117-.38c.677.046 1.39.208 1.992.586.764.48 1.3 1.278 1.387 2.466a.797.797 0 01-.8.85z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.637 11.671c1.004-.576 2.243-.754 3.364-.754 1.12 0 2.36.178 3.363.754 1.034.593 1.786 1.591 1.91 3.12.044.546-.402.96-.898.96h-8.75c-.497 0-.943-.413-.899-.96.124-1.529.876-2.527 1.91-3.12zm-.901 3.08h8.53c-.124-1.117-.667-1.793-1.4-2.212-.787-.453-1.826-.622-2.865-.622-1.04 0-2.078.17-2.867.622-.732.42-1.275 1.095-1.398 2.211z'/%3E%3C/g%3E%3C/svg%3E");
	width: 20px;
	height: 20px;
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 4px;
}

.bx-call-user-list-component__user-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: -4px;
}

.bx-call-user-list-component__user-item:first-child {
	margin: 0;
}

.bx-call-user-list-component:hover .bx-call-user-list-component__user-avatar {
	border: 2px solid var(--call-user-list-avatar-border-color-active);
}

.bx-call-user-list-component__user-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: 2px solid var(--call-user-list-avatar-border-color);
	transition: 0.25s ease-in-out border;
}
.bx-call-user-list-component__user-avatar.--border {
	border-color: var(--call-user-list-avatar-border-color-new);
}


.bx-call-user-list-component__user-avatar.--icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.83 30.994a.591.591 0 00.358-.664l-.694-3.536c0-1.119-1.49-2.397-4.426-3.142a10.06 10.06 0 01-2.802-1.252c-.189-.106-.16-1.083-.16-1.083l-.945-.141c0-.08-.081-1.252-.081-1.252 1.13-.373 1.015-2.574 1.015-2.574.718.391 1.186-1.35 1.186-1.35.85-2.42-.423-2.273-.423-2.273a14.94 14.94 0 000-4.456c-.566-4.9-9.085-3.57-8.075-1.97-2.49-.45-1.922 5.111-1.922 5.111l.54 1.44c-.748.477-.601 1.024-.437 1.634.069.255.14.521.15.798.053 1.387.918 1.1.918 1.1.053 2.29 1.204 2.588 1.204 2.588.216 1.438.081 1.194.081 1.194l-1.024.121c.014.327-.013.655-.08.975-.595.26-.96.468-1.32.673-.37.21-.735.417-1.34.678-2.311.994-4.823 2.287-5.27 4.028-.18.701-.355 1.735-.5 2.72-.039.27.11.532.363.633 3.29 1.312 7.067 2.093 11.094 2.18h1.497c4.026-.087 7.803-.868 11.093-2.18z' fill='%23fff'/%3E%3C/svg%3E");
	background-size: 17px 17px;
}

.bx-call-user-list-component__user-avatar.--more {
	font: 12px/var(--ui-font-line-height-xl) var(--ui-font-family-primary);
	font-weight: var(--ui-font-weight-medium, 500);
	color: rgba(var(--ui-color-palette-white-base-rgb), 0.6);
	margin-left: 6px;
	width: auto;
	border: none;
}

.bx-call-user-list-component:hover .bx-call-user-list-component__user-avatar.--more {
	border: none;
}