ez-pro/core/bitrix/js/ui/cnt/ui.cnt.css

:root {
	/*size*/
	--ui-counter-current-size: 16px;
	--ui-counter-size-sm: 13px;
	--ui-counter-size-md: 16px;
	--ui-counter-size-lg: 19px;
	--ui-counter-font-size: 11px;
	--ui-counter-font-weight: var(--ui-font-weight-bold);
	/*color*/
	--ui-counter-current-bg-color: #f54819;
	--ui-counter-bg-color-gray: #a8adb4;
	--ui-counter-bg-color-success: #9dcf00;
	--ui-counter-bg-color-primary: #2fc6f6;
	--ui-counter-bg-color-danger: #f54819;
	--ui-counter-bg-color-warning: #FBAF16;
	--ui-counter-bg-color-light: #fff;
	--ui-counter-bg-color-white: #fff;
	--ui-counter-bg-color-theme: rgba(82, 92, 105, .15);
	--ui-counter-bg-color-dark: rgba(255, 255, 255, .19);
	/*border color*/
	--ui-counter-current-border-color: transparent;
	--ui-counter-border-color-light: #fff;
}

:root .bitrix24-light-theme {
	--ui-counter-bg-color-theme: rgba(255, 255, 255, .3);
}

/*region Base style*/
.ui-counter {
	display: inline-flex;
	align-items: center;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-size: var(--ui-counter-font-size);
	line-height: var(--ui-counter-current-size);
	font-weight: var(--ui-font-weight-regular, 400);
	position: relative;
}

.ui-counter-inner {
	text-align: center;
	position: relative;
	color: #fff;
	vertical-align: middle;
	min-width: calc(var(--ui-counter-current-size) + 2px);
	box-sizing: border-box;
	padding: 0 4px;
	border-radius: calc(var(--ui-counter-current-size) / 2);
	background-color: var(--ui-counter-current-bg-color);
	border: 1px solid var(--ui-counter-current-border-color);
	overflow: hidden;
	line-height: inherit;
	height: var(--ui-counter-current-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.ui-counter-secondary {
	position: absolute;
	left: 3px;
	background-color: var(--ui-counter-current-bg-color);
	width: 100%;
	height: 100%;
	border-radius: calc(var(--ui-counter-current-size) / 2);
}

.ui-counter-secondary:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: -2px;
	background: var(--ui-color-background-primary);
	border-radius: calc(var(--ui-counter-current-size) / 2);
}

/*endregion*/

/*region Counter colors*/
.ui-counter-gray {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-gray);
}

.ui-counter-primary {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-primary);
}

.ui-counter-danger {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-danger);
}

.ui-counter-success {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-success);
}

.ui-counter-warning {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-warning);
}

.ui-counter-light .ui-counter-inner {
	box-shadow: inset 0 0 0 1px rgba(168, 173, 180, .5);
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-light);
}

.ui-counter-light .ui-counter-inner {
	color: #535c69 !important;
}

.ui-counter-white {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-white);
}

.ui-counter-white .ui-counter-inner {
	color: #CBD0D3 !important;
}

.ui-counter-theme {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-theme);
}

.ui-counter-theme .ui-counter-inner {
	color: rgba(82, 92, 105, 1);
}

.bitrix24-light-theme .ui-counter-theme .ui-counter-inner {
	color: #fff;
}

.ui-counter-dark .ui-counter-inner {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-dark);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .21);
}

/*endregion*/

/*region Counter size*/
.ui-counter-sm {
	--ui-counter-current-size: var(--ui-counter-size-sm);
	--ui-counter-font-weight: 400;
	--ui-counter-font-size: 10px;
}

.ui-counter-md {
	--ui-counter-font-weight: 600;
	--ui-counter-current-size: var(--ui-counter-size-md);
}

.ui-counter-lg {
	--ui-counter-font-weight: 600;
	--ui-counter-current-size: var(--ui-counter-size-lg);
}

/*endregion*/

/*region change value*/
.ui-counter-plus,
.ui-counter-minus {
	animation-duration: 250ms;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

.ui-counter-plus {
	animation-name: uiCounterPlus;
}

.ui-counter-minus {
	animation-name: uiCounterMinus;
}

@keyframes uiCounterPlus {
	0%, 100% {
		top: 0;
		opacity: 1;
	}
	33%, 77% {
		opacity: 1;
	}
	49% {
		top: var(--ui-counter-current-size);
	}
	50% {
		opacity: 0;
	}
	51% {
		top: calc(var(--ui-counter-current-size) * -1);
	}
}

@keyframes uiCounterMinus {
	0%, 100% {
		top: 0;
		opacity: 1;
	}
	45% {
		top: calc(var(--ui-counter-current-size) * -1);
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	55% {
		top: var(--ui-counter-current-size);
		opacity: 1;
	}
}

.ui-counter-hide,
.ui-counter-show {
	animation-duration: 250ms;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode: both;
}

.ui-counter-hide {
	animation-name: uiCounterHide;
}

.ui-counter-show {
	animation-name: uiCounterShow;
}

@keyframes uiCounterShow {
	from {
		opacity: 0;
		top: calc(var(--ui-counter-current-size) * -1);
	}
	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes uiCounterHide {
	from {
		top: 0;
		opacity: 1;
	}
	to {
		opacity: 0;
		top: calc(var(--ui-counter-current-size) * -1);
	}
}

/*endregion*/

.ui-counter-border {
	--ui-counter-current-border-color: var(--ui-counter-border-color-light);
}