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

/*endregion*/

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

.ui-icon > i {
	position: relative;
	display: block;
	padding-top: 100%;
	width: 100%;
	border-radius: 50%;
	background-position: center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: var(--ui-icon-service-bg-color);
	background-image: var(--ui-icon-service-bg-image);
}

.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 { --ui-icon-size: var(--ui-icon-size-xs); }

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

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

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

/*endregion*/