.ui-counter__scope.--air {
	--ui-counter-size: var(--ui-counter-size-md);
	--ui-counter-bg-color: red;
	--ui-counter-color: red;
	--ui-counter-size-lg: 18px;
	--ui-counter-size-md: 16px;
	--ui-counter-size-sm: 14px;
	--ui-counter-font-size: 11px;
	--ui-counter-symbol-font-size: 11px;
	--ui-counter-inline-space: 6px;
	--ui-counter-border-color: transparent;
	--ui-counter-border-width: 0;
}

/*region Base style*/
.ui-counter.--air {
	display: inline-flex;
	align-items: center;
	font-family: var(--ui-font-family-primary);
	font-size: var(--ui-counter-font-size);
	font-weight: var(--ui-font-weight-medium);
	position: relative;
	overflow: unset;
}

.ui-counter.--air .ui-counter-inner,
.bitrix24-light-theme .ui-counter.--air .ui-counter-inner,
.bitrix24-dark-theme .ui-counter.--air .ui-counter-inner {
	box-sizing: border-box;
	position: relative;
	min-width: var(--ui-counter-size);
	height: var(--ui-counter-size);
	padding: 0 var(--ui-counter-inline-space);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	background: var(--ui-counter-bg-color);
	border-radius: var(--ui-counter-current-size);
	border: var(--ui-counter-border-width) solid var(--ui-counter-border-color);
	text-align: center;
	color: var(--ui-counter-color);
	line-height: inherit;
	vertical-align: middle;
	overflow: hidden;
	z-index: 1;
}

.ui-counter.--air.--one-digit .ui-counter-inner {
	padding-inline: 0;
}

.ui-counter.--air .ui-counter__symbol {
	color: inherit;
	font-size: var(--ui-counter-symbol-font-size);
	opacity: 0.96;
	letter-spacing: var(--ui-letter-spacing-xl);
}

/*endregion*/

/* region Counter styles */

.ui-counter.--air.--style-filled-extra {
	--ui-counter-bg-color: var(--gradient-brand, linear-gradient(349deg, #0B83FF 32.07%, #32B2F4 64.58%, #75E4BD 95.91%));
	--ui-counter-color: var(--ui-color-base-white-fixed);
}

.ui-counter.--air.--style-filled {
	--ui-counter-bg-color: var(--ui-color-design-filled-bg);
	--ui-counter-color: var(--ui-color-design-filled-content);
	--ui-counter-border-width: var(--ui-design-filled-stroke-weight);
	--ui-counter-border-color: var(--ui-color-design-filled-stroke);
}

.ui-counter.--air.--style-filled-inverted {
	--ui-counter-bg-color: var(--ui-color-design-filled-content);
	--ui-counter-color: var(--ui-color-design-filled-bg);
	--ui-counter-border-width: var(--ui-design-filled-stroke-weight);
	--ui-counter-border-color: var(--ui-color-design-filled-content);
}

.ui-counter.--air.--style-filled-alert {
	--ui-counter-bg-color: var(--ui-color-design-filled-alert-bg);
	--ui-counter-color: var(--ui-color-design-filled-alert-content);
	--ui-counter-border-width: var(--ui-design-filled-alert-stroke-weight);
	--ui-counter-border-color: var(--ui-color-design-filled-alert-stroke);
}

.ui-counter.--air.--style-filled-alert-inverted {
	--ui-counter-bg-color: var(--ui-color-design-filled-alert-content);
	--ui-counter-color: var(--ui-color-design-filled-alert-bg);
	--ui-counter-border-width: 0;
	--ui-counter-border-color: var(--ui-color-design-filled-alert-content);
}

.ui-counter.--air.--style-filled-warning {
	--ui-counter-bg-color: var(--ui-color-design-filled-warning-bg);
	--ui-counter-color: var(--ui-color-design-filled-warning-content);
	--ui-counter-border-width: var(--ui-design-filled-warning-stroke-weight);
	--ui-counter-border-color: var(--ui-color-design-filled-warning-stroke);
}

.ui-counter.--air.--style-filled-success {
	--ui-counter-bg-color: var(--ui-color-design-filled-success-bg);
	--ui-counter-color: var(--ui-color-design-filled-success-content);
	--ui-counter-border-width: var(--ui-design-filled-success-stroke-weight);
	--ui-counter-border-color: var(--ui-color-design-filled-success-stroke);
}

.ui-counter.--air.--style-filled-success-inverted {
	--ui-counter-bg-color: var(--ui-color-design-filled-success-content);
	--ui-counter-color: var(--ui-color-design-filled-success-bg);
	--ui-counter-border-width: var(--ui-design-filled-success-stroke-weight);
	--ui-counter-border-color: var(--ui-color-design-filled-success-content);
}

.ui-counter.--air.--style-filled-no-accent {
	--ui-counter-bg-color: var(--ui-color-design-filled-na-bg-secondary);
	--ui-counter-color: var(--ui-color-design-filled-na-content);
	--ui-counter-border-width: 0;
}

.ui-counter.--air.--style-filled-no-accent-inverted {
	--ui-counter-bg-color: var(--ui-color-design-filled-na-content);
	--ui-counter-color: var(--ui-color-design-filled-na-bg-secondary);
	--ui-counter-border-width: var(--ui-design-filled-na-stroke-weight);
	--ui-counter-border-color: var(--ui-color-design-filled-na-content);
}

.ui-counter.--air.--style-tinted-no-accent {
	--ui-counter-bg-color: var(--ui-color-design-tinted-na-bg);
	--ui-counter-color: var(--ui-color-design-tinted-na-content);
	--ui-counter-border-width: 0;
}

.ui-counter.--air.--style-outline-no-accent {
	--ui-counter-bg-color: var(--ui-color-design-outline-na-bg);
	--ui-counter-color: var(--ui-color-design-outline-na-content);
	--ui-counter-border-width: var(--ui-design-outline-na-stroke-weight-alt);
	--ui-counter-border-color: var(--ui-color-design-outline-na-stroke);
}

/*endregion*/

/*region Counter size*/
.ui-counter-sm.--air {
	--ui-counter-size: var(--ui-counter-size-sm);
	--ui-counter-font-size: var(--ui-font-size-4xs);
	--ui-counter-symbol-font-size: var(--ui-font-size-5xs);
	--ui-counter-inline-space: 4px;
}

.ui-counter-md.--air {
	--ui-counter-size: var(--ui-counter-size-md);
	--ui-counter-font-size: var(--ui-font-size-xs);
	--ui-counter-symbol-font-size: var(--ui-font-size-4xs);
	--ui-counter-inline-space: 4px;
}

.ui-counter-lg.--air {
	--ui-counter-size: var(--ui-counter-size-lg);
	--ui-counter-font-size: var(--ui-font-size-sm);
	--ui-counter-symbol-font-size: var(--ui-font-size-4xs);
	--ui-counter-inline-space: 6px;
}

/*endregion*/

.ui-counter.--air.ui-counter-border {
	--ui-counter-border-width: var(--ui-border-width-thin);
	--ui-counter-border-color: var(--ui-color-base-white-fixed);
}