: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;
	padding: 0;
	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;
	position: relative;
	height: calc(var(--ui-counter-current-size) - 2px);
}

.ui-counter-inner {
	text-align: center;
	position: relative;
	color: #fff;
	vertical-align: middle;
	min-width: var(--ui-counter-current-size);
	box-sizing: border-box;
	padding: 0 4px;
	font: var(--ui-counter-font-weight) var(--ui-counter-font-size)/var(--ui-counter-current-size) var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
}

/*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 {
	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-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);
}