.ui-counter-panel__scope {
	--color-background: rgba(82,92,105,.08);
	--color-hover: rgba(82,92,105,.1);
	--color-active: rgba(var(--ui-color-primary-rgb), .57);
	--color-active-hover: var(--ui-color-base-02);
	--color-text: var(--ui-color-base-90);
	--color-text-active: var(--ui-color-base-90);
	--color-separator: rgba(var(--ui-color-palette-beige-base-rgb), .15);

	--border-radius-xl: 24px;
	--border-radius-sm: 2px;
}

.ui-counter-panel.--air.ui-counter-panel__scope,
.bitrix24-light-theme .ui-counter-panel.--air.ui-counter-panel__scope,
.bitrix24-dark-theme .ui-counter-panel.--air.ui-counter-panel__scope {
	--color-background: var(--ui-color-design-outline-bg);
	--color-hover: color-mix(in srgb, var(--ui-color-design-outline-bg) 100%, var(--ui-color-bg-state-hover-default-hex)  var(--ui-color-bg-state-hover-default-opacity));
	--color-active: var(--ui-color-design-selection-bg);
	--color-active-hover: var(--ui-color-base-02);
	--color-text: var(--ui-color-design-outline-content);
	--color-text-active: var(--ui-color-design-selection-content);
	--color-separator: rgba(var(--ui-color-palette-beige-base-rgb), .15);

	--border-radius-xl: var(--ui-border-radius-sm);
	--border-radius-sm: 2px;
}

.bitrix24-light-theme .ui-counter-panel.--air.ui-counter-panel__scope,
.bitrix24-dark-theme .ui-counter-panel.--air.ui-counter-panel__scope {
	--color-background: var(--ui-color-design-outline-bg);
	--color-hover: color-mix(in srgb, var(--ui-color-design-outline-bg) 100%, var(--ui-color-bg-state-hover-default-hex)  var(--ui-color-bg-state-hover-default-opacity));
	--color-text: var(--ui-color-design-outline-content);
}

.bitrix24-light-theme .ui-counter-panel__scope {
	--color-background: rgba(var(--ui-color-on-primary-rgb), .15);
	--color-hover: rgba(var(--ui-color-on-primary-rgb), .15);
	--color-text: rgba(var(--ui-color-on-primary-rgb), .8);
	--color-text-active: rgba(var(--ui-color-on-primary-rgb), 1);
	--color-separator: rgba(var(--ui-color-palette-beige-base-rgb), .15);
}

.ui-counter-panel {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	background: var(--color-background);
	border-radius: var(--border-radius-xl);
	font: 14px/normal var(--ui-font-family-secondary);
	font-weight: var(--ui-font-weight-regular, 400);
}

.ui-counter-panel.--air {
	font: var(--ui-font-size-sm)/var(--ui-font-line-height-2xs) var(--ui-font-family-primary);
	-webkit-backdrop-filter: var(--ui-counter-panel-custom-backdrop-filter, var(--ui-bg-blur-content));
	        backdrop-filter: var(--ui-counter-panel-custom-backdrop-filter, var(--ui-bg-blur-content));
	background: var(--ui-counter-panel-custom-background, none);

	/* Drop the clip so a focused button's outward ring is not cut off. The pill shape survives:
	   the blur stays rounded via border-radius, and the edge buttons round their own outer corners.
	   Separators and the item :after are display: none in air, so nothing else leaks out. */
	overflow: visible;
}

.ui-counter-panel__item-separator {
	display: block;
	width: 1px;
	height: 15px;
	margin: 0 2px;
	background: var(--color-separator);
}

.ui-counter-panel__item-separator.--invisible {
	margin: 0;
	background: transparent;
}

.ui-counter-panel__item-separator:last-child {
	display: none;
}

.ui-counter-panel.--air .ui-counter-panel__item-separator {
	display: none;
}

.ui-counter-panel__item {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	padding: 0 20px 0 5px;
	position: relative;
	min-height: 33px;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	color: var(--color-text);
	transition: .2s;
}

.ui-counter-panel.--air .ui-counter-panel__item {
	min-height: 28px;
	padding: 0 10px;
	background-color: var(--color-background);
	border-radius: var(--ui-border-radius-none);

	/* Keep the .2s fades (hover/active background, colour) but make the focus ring appear instantly:
	   the base `transition: .2s` is `transition: all`, which would otherwise grow outline from 0. */
	transition: all .2s, outline-color 0s, outline-offset 0s, outline-width 0s;
}

/* The container no longer clips, so the edge items draw the pill's outer corners themselves
   (same radius as the panel). Inner corners stay square so adjacent segments join seamlessly.
   Items are buttons or spans, so the edges are matched by position, not by type: the only node that
   can precede the first item is the panel title (hidden in air), and the last node is always an item. */
.ui-counter-panel.--air .ui-counter-panel__item:first-child,
.ui-counter-panel.--air .ui-counter-panel__item-head + .ui-counter-panel__item {
	border-top-left-radius: var(--border-radius-xl);
	border-bottom-left-radius: var(--border-radius-xl);
}

.ui-counter-panel.--air .ui-counter-panel__item:last-child {
	border-top-right-radius: var(--border-radius-xl);
	border-bottom-right-radius: var(--border-radius-xl);
}

/* Air renders items as native buttons. Zero specificity keeps this a reset of the user agent look only:
   every rule of this file and of consumer modules still wins over it. */
:where(.ui-counter-panel.--air button.ui-counter-panel__item) {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* Screen-reader-only text: kept in the accessibility tree, removed from the visual layout.
   Used to give the more button a composite name (label + hidden count) without an aria-label. */
.ui-counter-panel.--air .ui-counter-panel__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus only - a mouse click must not draw the ring.
   The ring is outside the button (ui.buttons air recipe). The panel no longer clips (overflow: visible),
   so the ring is fully visible and follows the rounded outer corners of the edge buttons. */
.ui-counter-panel.--air .ui-counter-panel__item:focus-visible {
	outline: 2px solid var(--ui-color-accent-main-link);
	outline-offset: 2px;
}

.ui-counter-panel.--air .ui-counter-panel__item.--zero {
	--color-background: var(--ui-color-design-outline-na-bg);
	--color-hover: color-mix(in srgb, var(--ui-color-design-outline-na-bg) 100%, var(--ui-color-bg-state-hover-default-hex)  var(--ui-color-bg-state-hover-default-opacity));
	--color-text: var(--ui-color-design-outline-na-content);
}

.ui-counter-panel__item.--string {
	padding-left: 15px;
}

.ui-counter-panel__item.--title {
	padding-right: 8px;
	pointer-events: none;
}

.ui-counter-panel__item.--active {
	color: var(--color-text-active);
}

.ui-counter-panel__item:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	border-radius: var(--border-radius-sm);
	background: transparent;
	pointer-events: none;
	transform: translateX(-7px);
	transition: .2s;
}

.ui-counter-panel.--air .ui-counter-panel__item:after {
	display: none;
	transform: none;
	border-radius: var(--ui-border-radius-none);
}

.ui-counter-panel__item:first-child {
	padding-left: 11px;
	border-top-left-radius: var(--border-radius-xl);
	border-bottom-left-radius: var(--border-radius-xl);
}

.ui-counter-panel__item.--string:first-child {
	padding-left: 16px;
}

.ui-counter-panel__item:last-child {
	padding-right: 20px;
	border-top-right-radius: var(--border-radius-xl);
	border-bottom-right-radius: var(--border-radius-xl);
}

.ui-counter-panel__item:last-child:after {
	transform: translateX(0);
}

/* Focus parity with hover. Same specificity as the --active rule below, which stays the winner */
.ui-counter-panel.--air .ui-counter-panel__item.--hover,
.ui-counter-panel.--air .ui-counter-panel__item:focus-visible {
	--color-background: var(--color-hover);
}

.ui-counter-panel.--air .ui-counter-panel__item.--active,
.ui-counter-panel.--air .ui-counter-panel__item.--hover.--active {
	--color-background: var(--color-active);
}

.ui-counter-panel__item.--hover:after {
	background: var(--color-hover);
	transition: .1s;
}

.ui-counter-panel__item.--dropdown.--hover:not(.--active):after {
	background: transparent;
}

.ui-counter-panel.--air .ui-counter-panel__item.--dropdown:hover:not(.--active) {
	background: var(--color-hover);
}

.ui-counter-panel__item.--active:after {
	background: var(--color-active);
	transform: translateX(0);
}

.ui-counter-panel__item.--dropdown:after {
	width: calc(100% - 30px);
}

.ui-counter-panel__item.--locked,
.ui-counter-panel__item.--restricted {
	pointer-events: none;
	opacity: .5;
}

.ui-counter-panel__item.--pointer-events-none {
	pointer-events: none;
}

.ui-counter-panel__item-value {
	display: inline-flex;
	align-items: center;
	margin: auto 6px auto 7px;
	z-index: 1;
}

.ui-counter-panel.--air .ui-counter-panel__item-value {
	margin: auto 6px auto 0;
}

.ui-counter-panel__item-lock {
	display: block;
	width: 12px;
	height: 16px;
	content: '';
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' fill='none' viewBox='0 0 12 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6.692 11.726v1.746H5.308v-1.746a1.1 1.1 0 0 1-.408-.86c0-.611.493-1.107 1.1-1.107s1.1.495 1.1 1.107c0 .347-.16.657-.408.86M2.989 4.63A3.02 3.02 0 0 1 6 1.601a3.02 3.02 0 0 1 3.011 3.03v2.562H2.99zm7.614 2.561v-2.56C10.603 2.073 8.542 0 6 0S1.397 2.073 1.397 4.631v2.561H.5a.5.5 0 0 0-.5.5v7.77a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-7.77a.5.5 0 0 0-.5-.5z' clip-rule='evenodd'/%3E%3C/svg%3E") center no-repeat;
	margin-right: 5px;
}

.ui-counter-panel__item-title + .ui-counter-panel__item-value {
	margin-right: 0;
}

.ui-counter-panel__item-title {
	display: inline-flex;
	align-items: center;
	margin-bottom: 1px;
	overflow: hidden;
	white-space: nowrap;
	z-index: 1;
}

.ui-counter-panel.--air .ui-counter-panel__item-title {
	margin-bottom: 0;
}

.ui-counter-panel__item.--collapsed .ui-counter-panel__item-title {
	display: none;
}

.ui-counter-panel__item-title:first-child {
	padding-left: 5px;
}

.ui-counter-panel__item.--string .ui-counter-panel__item-title {
	padding-left: 0;
}

.ui-counter-panel__item-collapsed-icon {
	--ui-icon-set__icon-color: var(--color-text-active);
	--ui-icon-set__icon-size: 24px;

	display: none;
	width: 24px;
	height: 24px;
	-webkit-mask-image: var(--ui-icon-set__icon);
	        mask-image: var(--ui-icon-set__icon);
	-webkit-mask-position: center center;
	        mask-position: center center;
	-webkit-mask-size: 24px 24px;
	        mask-size: 24px 24px;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	background-color: var(--ui-icon-set__icon-color);
}

.ui-counter-panel__item.--collapsed .ui-counter-panel__item-collapsed-icon {
	display: flex;
}

.ui-counter-panel__item-collapsed-icon.--icon-chat-check {
	--ui-icon-set__icon: var(--ui-icon-set__path_chats-with-check);
}

.ui-counter-panel.--air .ui-counter-panel__item-collapsed-icon.--icon-chat-check {
	--ui-icon-set__icon: var(--o-ui-icon-set__path_chats-with-check);
}

.ui-counter-panel__item-cross {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	z-index: 1;
	cursor: pointer;
	opacity: 0;
	transform: translateX(-5px);
	transition: .1s;
}

.ui-counter-panel.--air .ui-counter-panel__item-cross {
	display: none;
}

.ui-counter-panel__item.--dropdown .ui-counter-panel__item-cross {
	position: relative;
	width: 0;
	transition: .4s;
}

.ui-counter-panel__item.--dropdown.--active .ui-counter-panel__item-cross {
	width: 20px;
	transition: .2s;
}

.ui-counter-panel__item.--dropdown {
	padding-right: 15px;
}

.ui-counter-panel__item:last-child .ui-counter-panel__item-cross {
	width: 22px;
	justify-content: flex-start;
}

.ui-counter-panel__item-cross i {
	display: block;
	width: 8px;
	height: 7px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' fill='none' viewBox='0 0 8 7'%3E%3Cpath fill='%23525c69' fill-rule='evenodd' d='M6.409.276 4.382 2.303 2.356.276c-.368-.368-.829-.368-1.197 0-.369.369-.369.83 0 1.198L3.185 3.5 1.159 5.526c-.369.369-.369.83 0 1.198.368.368.829.368 1.197 0l2.026-2.027L6.41 6.724c.368.368.829.368 1.197 0 .368-.369.368-.83 0-1.198L5.58 3.5l2.026-2.026c.368-.369.368-.83 0-1.198C7.238 0 6.685 0 6.409.276' clip-rule='evenodd'/%3E%3C/svg%3E") center no-repeat;
	pointer-events: none;
}

.bitrix24-light-theme .ui-counter-panel__item-cross i {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' fill='none' viewBox='0 0 8 7'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6.409.276 4.382 2.303 2.356.276c-.368-.368-.829-.368-1.197 0-.369.369-.369.83 0 1.198L3.185 3.5 1.159 5.526c-.369.369-.369.83 0 1.198.368.368.829.368 1.197 0l2.026-2.027L6.41 6.724c.368.368.829.368 1.197 0 .368-.369.368-.83 0-1.198L5.58 3.5l2.026-2.026c.368-.369.368-.83 0-1.198C7.238 0 6.685 0 6.409.276' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.ui-counter-panel__item:last-child .ui-counter-panel__item-cross i {
	margin-left: 5px;
}

.ui-counter-panel__item.--active .ui-counter-panel__item-cross {
	opacity: .5;
	transform: translateX(0);
	transition: .2s;
	pointer-events: auto;
}

.ui-counter-panel__item.--active .ui-counter-panel__item-cross:hover {
	opacity: .8;
	transition: .05s;
}

.ui-counter-panel__item-head {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	overflow: hidden;
	white-space: normal;
	padding-left: 20px;
	color: var(--color-text-active);
	opacity: 1;
	transition: .2s;
}

.ui-counter-panel.--air .ui-counter-panel__item-head {
	display: none;
}

.ui-counter-panel__item-dropdown {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	width: 10px;
	opacity: .7;
	z-index: 2;
}

.ui-counter-panel__item-dropdown i {
	display: inline-block;
	width: 10px;
	height: 6px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath fill='%23525c69' fill-rule='evenodd' d='m8.899 0-3.12 3.069-.786.76-.772-.76L1.101 0 0 1.083 5 6l5-4.917z' clip-rule='evenodd'/%3E%3C/svg%3E") center no-repeat;
}

.bitrix24-light-theme .ui-counter-panel__item-dropdown i {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m8.899 0-3.12 3.069-.786.76-.772-.76L1.101 0 0 1.083 5 6l5-4.917z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.ui-counter-panel__item.--hover .ui-counter-panel__item-dropdown,
.ui-counter-panel__item.--active .ui-counter-panel__item-dropdown,
.ui-counter-panel__item:hover .ui-counter-panel__item-dropdown {
	opacity: .9;
}

.ui-counter-panel.--air .ui-counter-panel__item:focus-visible .ui-counter-panel__item-dropdown {
	opacity: .9;
}

.ui-counter-panel__item--more-trigger:hover:after {
	background: var(--color-hover);
	transition: .1s;
}

.ui-counter-panel.--air .ui-counter-panel__item--more-trigger:hover,
.ui-counter-panel.--air .ui-counter-panel__item--more-trigger.--hover {
	--color-background: var(--color-hover);
}

.ui-counter-panel__item--more-trigger .ui-counter-panel__item-dropdown {
	margin-left: 4px;
}