/*region Variables*/
:root {
	--ui-icon-size-xs: 26px;
	--ui-icon-size-sm: 31px;
	--ui-icon-size-md: 39px;
	--ui-icon-size-lg: 47px;
}

/*endregion*/

.ui-icon {
	position: relative;
	display: inline-block;
	width: var(--ui-icon-size-md);
}

.ui-icon > i {
	position: relative;
	display: block;
	padding-top: 100%;
	width: 100%;
	border-radius: 50%;
	background-color: #ebeff2;
	background-position: center;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.ui-icon-square > i,
.ui-icon[class*=ui-icon-file-] > i { border-radius: 1px !important; }

button.ui-icon,
.ui-icon-btn {
	padding: 0;
	outline: none;
	border: none;
	background: transparent;
	text-decoration: none;
	cursor: pointer;
}

button.ui-icon > i,
.ui-icon-btn > i { transition: 250ms linear opacity; }

button.ui-icon > i:hover,
.ui-icon-btn > i:hover { opacity: .85; }

button.ui-icon > i:active,
.ui-icon-btn > i:active { opacity: 1; }

/*region Size*/
.ui-icon-xs { width: var(--ui-icon-size-xs); }

.ui-icon-sm { width: var(--ui-icon-size-sm); }

.ui-icon-md { width: var(--ui-icon-size-md); }

.ui-icon-lg { width: var(--ui-icon-size-lg); }

/* region Fix for IE*/
.bx-ie .ui-icon,
.bx-ie .ui-icon-md { width: 39px; }

.bx-ie .ui-icon-xs { width: 26px; }

.bx-ie .ui-icon-sm { width: 32px; }

.bx-ie .ui-icon-lg { width: 47px; }

/*endregion*/

/*endregion*/

.ui-icon-service-vkontakte > i,
.ui-icon-service-facebook > i,

.ui-icon-service-office365 > i {
	background-color: #fff;
	background-image: url(/bitrix/js/ui/icons/service/images/ui-service-office365.svg);
}

.ui-icon-service-yandex > i,
.ui-icon-service-ya > i {
	background-color: #fff;
	background-image: url(/bitrix/js/ui/icons/service/images/ui-service-ya.svg);
}

.ui-icon-service-liveid > i {
	background-color: #fff;
	background-image: url(/bitrix/js/ui/icons/service/images/ui-service-liveid.svg);
}

.ui-icon-service-twitter > i {
	background-color: #1ea1f2;
	background-image: url(/bitrix/js/ui/icons/service/images/ui-service-twitter.svg);
}

.ui-icon-service-google > i {
	background-color: #fff;
	background-image: url(/bitrix/js/ui/icons/service/images/ui-service-google.svg);
}