/* common */
.ui-chip {
	--transition-duration: 180ms;
}


/* size */
.ui-chip {
	--min-height: 34px;
	--padding: 0 12px;
	--font-size: var(--ui-font-size-md);
	--line-height: var(--ui-font-line-height-sm);
	--icon-size: 20px;
	--background-icon-size: 14px;
}

.ui-chip.--m {
	--padding: 0 10px;
	--min-height: 28px;
}

.ui-chip.--s {
	--min-height: 24px;
	--padding: 0 10px;
	--font-size: var(--ui-font-size-sm);
	--line-height: var(--ui-font-line-height-2xs);
	--icon-size: 18px;
	--background-icon-size: 12px;
}

.ui-chip.--xs {
	--min-height: 20px;
	--padding: 0 10px;
	--font-size: var(--ui-font-size-xs);
	--line-height: var(--ui-font-line-height-3xs);
	--icon-size: 16px;
	--background-icon-size: 10px;
}


/* design */
.ui-chip {
	--text-color: var(--ui-color-base-3);
	--text-color-hover: var(--text-color);

	--background: var(--ui-color-base-8);
	--background-hover: var(--background);

	--border-color: var(--ui-color-base-8);
	--border-color-hover: var(--border-color);

	--icon-color: var(--text-color);
	--icon-color-hover: var(--icon-color);

	--clear-color: var(--text-color);
	--box-shadow: none;

	--cursor: pointer;
}

.ui-chip.--filled {
	--text-color: var(--ui-color-base-white-fixed);
	--background: var(--ui-color-accent-main-primary);
	--border-color: var(--ui-color-design-filled-stroke);
}

.ui-chip.--filled-success {
	--text-color: var(--ui-color-design-filled-success-content);
	--background: var(--ui-color-design-filled-success-bg);
	--border-color: var(--ui-color-design-filled-success-stroke);
}

.ui-chip.--filled-alert {
	--text-color: var(--ui-color-design-filled-alert-content);
	--background: var(--ui-color-design-filled-alert-bg);
	--border-color: var(--ui-color-design-filled-alert-stroke);
}

.ui-chip.--filled-warning {
	--text-color: var(--ui-color-design-filled-warning-content);
	--background: var(--ui-color-design-filled-warning-bg);
	--border-color: var(--ui-color-design-filled-warning-stroke);
}

.ui-chip.--filled-no-accent {
	--text-color: var(--ui-color-design-filled-na-content);
	--background: var(--ui-color-design-filled-na-bg);
	--border-color: var(--ui-color-design-filled-na-stroke);
}

.ui-chip.--filled-bitrix-gpt {
	--text-color: var(--ui-color-base-white-fixed);
	--clear-color: var(--ui-color-base-white-fixed);
	--background: linear-gradient(
		256.63deg,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-5, rgb(249, 98, 105)) 2.92%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-4, rgb(240, 70, 183)) 26%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-3, rgb(157, 72, 255)) 49.07%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-2, rgb(63, 104, 255)) 76.77%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-1, rgb(0, 152, 234)) 86%
	) padding-box,
		linear-gradient(transparent, transparent) border-box;
	--background-hover: linear-gradient(
		256.63deg,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-5, rgb(249, 98, 105)) 2.92%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-4, rgb(240, 70, 183)) 26%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-3, rgb(157, 72, 255)) 49.07%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-2, rgb(63, 104, 255)) 76.77%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-1, rgb(0, 152, 234)) 86%
	) padding-box,
		linear-gradient(transparent, transparent) border-box;
	--border-color: transparent;
	position: relative;
}

.ui-chip.--filled-bitrix-gpt::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ui-color-bg-state-hover-default, rgba(0, 0, 0, 0.03));
	opacity: 0;
	transition: opacity var(--transition-duration);
	pointer-events: none;
}

.ui-chip.--filled-bitrix-gpt:hover::after {
	opacity: 1;
}

.ui-chip.--filled-bitrix-gpt:active::after,
.ui-chip.--filled-bitrix-gpt:focus-visible::after {
	opacity: 1;
	background: var(--ui-color-bg-state-click-default, rgba(0, 0, 0, 0.05));
}

.ui-chip.--filled-inverted {
	--text-color: var(--ui-color-design-filled-bg);
	--background: var(--ui-color-design-filled-content);
}

.ui-chip.--filled-success-inverted {
	--text-color: var(--ui-color-design-filled-success-bg);
	--background: var(--ui-color-design-filled-success-content);
}

.ui-chip.--filled-warning-inverted {
	--text-color: var(--ui-color-design-filled-warning-bg);
	--background: var(--ui-color-design-filled-warning-content);
}

.ui-chip.--filled-alert-inverted {
	--text-color: var(--ui-color-design-filled-alert-bg);
	--background: var(--ui-color-design-filled-alert-content);
}

.ui-chip.--filled-no-accent-inverted {
	--text-color: var(--ui-color-design-filled-na-bg);
	--background: var(--ui-color-design-filled-na-content);
}

.ui-chip.--tinted {
	--text-color: var(--ui-color-accent-main-link);
	--background: var(--ui-color-accent-soft-blue-2);
	--border-color: var(--ui-color-design-tinted-stroke);
}

.ui-chip.--tinted-success {
	--text-color: var(--ui-color-design-tinted-success-content);
	--background: var(--ui-color-design-tinted-success-bg);
	--border-color: var(--ui-color-design-tinted-success-stroke);
}

.ui-chip.--tinted-alert {
	--text-color: var(--ui-color-design-tinted-alert-content);
	--background: var(--ui-color-design-tinted-alert-bg);
	--border-color: var(--ui-color-design-tinted-alert-stroke);
}

.ui-chip.--tinted-warning {
	--text-color: var(--ui-color-design-tinted-warning-content);
	--background: var(--ui-color-design-tinted-warning-bg);
	--border-color: var(--ui-color-design-tinted-warning-stroke);
}

.ui-chip.--tinted-no-accent {
	--text-color: var(--ui-color-design-tinted-na-content);
	--background: var(--ui-color-design-tinted-na-bg);
	--border-color: var(--ui-color-design-tinted-na-stroke);
}

.ui-chip.--outline-accent {
	--text-color: var(--ui-color-accent-main-primary);
	--border-color: var(--ui-color-accent-soft-blue-1);
	--border-color-hover: var(--ui-color-accent-main-primary-alt-2);
}

.ui-chip.--outline-accent-2 {
	--text-color: var(--ui-color-design-outline-a2-content);
	--border-color: var(--ui-color-design-outline-a2-stroke);
	--border-color-hover: var(--ui-color-design-outline-a2-stroke);
}

.ui-chip.--outline-success {
	--text-color: var(--ui-color-accent-main-success);
	--border-color: var(--ui-color-accent-soft-border-green);
	--clear-color: var(--ui-color-accent-soft-border-green);
}

.ui-chip.--outline-alert {
	--text-color: var(--ui-color-accent-main-alert);
	--border-color: var(--ui-color-accent-soft-red-1);
}

.ui-chip.--outline-warning {
	--text-color: var(--ui-color-accent-main-warning);
	--border-color: var(--ui-color-accent-soft-orange-1);
}

.ui-chip.--outline {
	--text-color: var(--ui-color-base-2);
	--text-color-hover: var(--ui-color-base-1);
	--border-color: var(--ui-color-base-7);
	--icon-color-hover: var(--ui-color-accent-main-primary);
}

.ui-chip.--outline-no-accent {
	--text-color: var(--ui-color-base-3);
	--text-color-hover: var(--ui-color-base-1);
	--border-color: var(--ui-color-base-7);
	--icon-color-hover: var(--ui-color-accent-main-primary);
	--clear-color: var(--ui-color-base-4);
}

.ui-chip.--outline-copilot {
	--text-color: var(--ui-color-design-outline-copilot-content);
	--border-color: var(--ui-color-design-outline-copilot-stroke);
}

.ui-chip.--outline-bitrix-gpt {
	--background: linear-gradient(var(--ui-color-design-outline-bitrix-gpt-bg, white), var(--ui-color-design-outline-bitrix-gpt-bg, white)) padding-box,
		linear-gradient(
			257.74deg,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-5, #f89ecb) 1.67%,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-4, #ed99e0) 21.82%,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-3, #cc9afd) 52.44%,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-2, #92aefe) 76.41%,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-1, #73c6f3) 97.21%
		) border-box;
	--background-hover: linear-gradient(var(--ui-color-design-outline-bitrix-gpt-bg, white), var(--ui-color-design-outline-bitrix-gpt-bg, white)) padding-box,
		linear-gradient(
			257.74deg,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-5, #f89ecb) 1.67%,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-4, #ed99e0) 21.82%,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-3, #cc9afd) 52.44%,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-2, #92aefe) 76.41%,
			var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-1, #73c6f3) 97.21%
		) border-box;
	--border-color: transparent;
	--border-color-hover: transparent;
	--icon-color: var(--ui-color-design-outline-bitrix-gpt-content-icon, #0098ea);
	--icon-color-hover: var(--ui-color-design-outline-bitrix-gpt-content-icon, #0098ea);
	--clear-color: var(--ui-color-design-outline-bitrix-gpt-content-gradient-4, rgb(240, 70, 183));
	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
	position: relative;
}

.ui-chip.--outline-bitrix-gpt .ui-chip-text,
.ui-chip.--outline-bitrix-gpt:hover .ui-chip-text {
	background-image: linear-gradient(
		257.74deg,
		var(--ui-color-design-outline-bitrix-gpt-content-gradient-5, rgb(249, 98, 105)) 1.67%,
		var(--ui-color-design-outline-bitrix-gpt-content-gradient-4, rgb(240, 70, 183)) 21.82%,
		var(--ui-color-design-outline-bitrix-gpt-content-gradient-3, rgb(157, 72, 255)) 52.44%,
		var(--ui-color-design-outline-bitrix-gpt-content-gradient-2, rgb(63, 104, 255)) 76.41%,
		var(--ui-color-design-outline-bitrix-gpt-content-gradient-1, rgb(0, 152, 234)) 97.21%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ui-chip.--outline-bitrix-gpt::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ui-color-bg-state-hover-default, rgba(0, 0, 0, 0.03));
	opacity: 0;
	transition: opacity var(--transition-duration);
	pointer-events: none;
}

.ui-chip.--outline-bitrix-gpt:hover::after {
	opacity: 1;
}

.ui-chip.--outline-bitrix-gpt:active::after,
.ui-chip.--outline-bitrix-gpt:focus-visible::after {
	opacity: 1;
	background: var(--ui-color-bg-state-click-default, rgba(0, 0, 0, 0.05));
}

.ui-chip.--shadow-no-accent {
	--text-color: var(--ui-color-base-3);
	--text-color-hover: var(--ui-color-base-1);
	--icon-color-hover: var(--ui-color-accent-main-primary);
	--clear-color: var(--ui-color-base-4);
	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.ui-chip.--shadow {
	--text-color: var(--ui-color-base-2);
	--text-color-hover: var(--ui-color-base-1);
	--icon-color: var(--ui-color-accent-main-primary);
	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.ui-chip.--shadow-accent {
	--text-color: var(--ui-color-accent-main-primary);
	--border-color: var(--ui-color-accent-soft-blue-1);
	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.ui-chip.--shadow-disabled {
	--text-color: var(--ui-color-base-5);
	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	--cursor: default;
}

.ui-chip.--shadow-outline-accent-2 {
	--text-color: var(--ui-color-design-outline-a2-content);
	--border-color: var(--ui-color-design-outline-a2-stroke);
	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
	--cursor: default;
}

.ui-chip.--shadow-outline {
	--text-color: var(--ui-color-design-outline-content);
	--border-color: var(--ui-color-design-outline-stroke);
	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
	--cursor: default;
}

.ui-chip.--disabled {
	--text-color: var(--ui-color-base-5);
	--background: var(--ui-color-base-7);
	--border-color: var(--ui-color-base-7);
	--cursor: default;
}


/* chip */
.ui-chip {
	box-sizing: border-box;
	flex: 1;
	display: flex;
	align-items: center;
	min-height: var(--min-height);
	padding: var(--padding);
	border-radius: var(--ui-border-radius-sm);
	background: var(--background);
	border: var(--ui-border-width-thin) solid var(--border-color);
	box-shadow: var(--box-shadow);
	cursor: var(--cursor);
	transition: border-color var(--transition-duration);
}

.ui-chip.--rounded {
	border-radius: var(--ui-border-radius-pill);
}

.ui-chip.--compact {
	max-width: -webkit-max-content;
	max-width: max-content;
}

.ui-chip.--trimmable {
	overflow: hidden;
}

.ui-chip:hover {
	background: var(--background-hover);
	border-color: var(--border-color-hover);
}

.ui-chip:focus-visible {
	outline: 2px solid var(--ui-color-design-outline-a1-content-divider);
}

.ui-chip .ui-icon-set {
	transition: background var(--transition-duration);
}


/* icon/image */
.ui-chip-icon {
	--ui-icon-set__icon-color: var(--icon-color);
	--ui-icon-set__icon-size: var(--icon-size);
	display: grid;
	place-items: center;
	width: var(--icon-size);
	min-width: var(--icon-size);
	min-height: var(--icon-size);
	margin: 0 var(--ui-space-inline-2xs) 0 var(--ui-space-stack-2xs2-neg);
}

.ui-chip-icon.--with-background {
	--icon-background: initial;
	--ui-icon-set__icon-size: var(--background-icon-size);
	border-radius: var(--ui-border-radius-pill);
	background: var(--icon-background);
}

.ui-chip.--no-text:not(.--with-right-icon) .ui-chip-icon {
	margin-right: var(--ui-space-stack-2xs2-neg);
}

.ui-chip.--no-text.--with-right-icon .ui-chip-icon {
	margin-right: var(--ui-space-inline-3xs);
}

.ui-chip:hover .ui-chip-icon {
	--ui-icon-set__icon-color: var(--icon-color-hover);
}

.ui-chip-icon.--image {
	border-radius: var(--ui-border-radius-pill);
}


/* text */
.ui-chip-text {
	overflow: hidden;
	color: var(--text-color);
	font-size: var(--font-size);
	line-height: var(--line-height);
	transition: color var(--transition-duration), background var(--transition-duration);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ui-chip:hover .ui-chip-text {
	color: var(--text-color-hover);
}


/* right-icon */
.ui-chip-right-icon {
	--ui-icon-set__icon-color: var(--clear-color);
	--ui-icon-set__icon-size: var(--icon-size);
	margin-right: var(--ui-space-inline-2xs2-neg);
	opacity: var(--ui-opacity-50);
}

.ui-chip-right-icon:hover {
	opacity: var(--ui-opacity-70);
}


/* lock */
.ui-chip-lock {
	--ui-icon-set__icon-color: var(--ui-color-accent-main-primary);
	--ui-icon-set__icon-size: 20px;
	margin-right: var(--ui-space-inline-2xs2-neg);
	opacity: var(--ui-opacity-50);
}

.ui-chip:hover .ui-chip-lock {
	opacity: var(--ui-opacity-70);
}

.ui-chip.--collapsed .ui-chip-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ui-chip.--collapsed:not(.--with-right-icon):not(:has(.ui-chip-lock)),
.ui-chip.--no-text:not(.--with-right-icon):has(.ui-chip-text:empty) {
	width: var(--min-height);
	min-width: var(--min-height);
	padding: 0;
	justify-content: center;
}

.ui-chip.--collapsed:not(.--with-right-icon):not(:has(.ui-chip-lock)) .ui-chip-icon,
.ui-chip.--no-text:not(.--with-right-icon):has(.ui-chip-text:empty) .ui-chip-icon {
	margin: 0;
}