ws-chip {
	display: inline-flex;
	overflow: hidden;
}
.chip {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: all .15s ease-in-out;
	transition-property: box-shadow, outline;
	--icon-size: 16px;
}

.chip.chip-no-pointer {
	cursor: auto;
}

.chip * {flex-shrink: 0}

.chip > span:not([class]) {
	flex-shrink: 1;
	flex-grow: 1;
	padding: 0 4px;
	font: var(--font-ui-12-mini-reg);
	color: var(--base-txt-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chip.chip-bold > span:not([class]) {font-weight: 590}
.chip:not(.chip-info, .chip-no-hover):hover > span:not([class]) {color: var(--base-txt-accent)}

.chip ws-icon, .chip svg {width: 16px; height: 16px;}
.chip.chip-16 ws-icon, .chip.chip-16 svg {width: 8px; height: 8px;}
.chip.chip-20 ws-icon, .chip.chip-20 svg {width: 12px; height: 12px;}
.chip.chip-28 ws-icon, .chip.chip-28 svg {width: 20px; height: 20px;}
.chip.chip-32 ws-icon, .chip.chip-32 svg {width: 24px; height: 24px;}

.chip ws-icon {--icon-color: var(--base-txt-secondary)}
.chip ws-icon.av_sm {border: none;background: var(--base-hlt-g-selected);overflow: hidden}
.chip:hover ws-icon {--icon-color: var(--base-txt-accent)}
.chip ws-icon.delete:not(.withHover, .cross-attr):hover {background: var(--base-hlt-g-selected); border-radius: 100%}
.chip ws-icon.chevron-attr {margin-left: -2px}
.chip ws-icon.chevron-attr:has(+ ws-icon.cross-attr) {padding-right: 4px}
.chip ws-icon.cross-attr {
	height: 100%;
	margin-right: -3px;
	padding-left: 3px;
	padding-right: 4px;
	border-left: 1px solid var(--base-line-tertiary);
}
.chip:not(.chip-disabled) ws-icon.cross-attr:hover {background: var(--base-hlt-g-hover)}

.chip:has(ws-icon.chip-left-icon.chip-box-big) {padding-left: 0}
.chip ws-icon.chip-box-big {--icon-color: var(--base-txt-btn-flip); background: var(--base-hlt-g-hover)}
.chip ws-icon.av_svg {width: 24px; height: 24px; border-radius: 100px; }
.chip.chip-28 ws-icon.chip-box-big, .chip.chip-28 ws-icon.av_svg {width: 28px; height: 28px}
.chip.chip-32 ws-icon.chip-box-big, .chip.chip-32 ws-icon.av_svg {width: 32px; height: 32px}
.chip.chip-28 ws-icon.chip-box-big svg, .chip.chip-32 ws-icon.chip-box-big svg {width: 20px; height: 20px}
.chip.chip-28 ws-icon.av_svg svg, .chip.chip-32 ws-icon.av_svg svg {width: 20px; height: 20px}
.chip ws-icon.chip-box-big.chip-box-color-green {background: var(--base-txt-new-major)}
.chip ws-icon.chip-box-big.chip-box-color-red {background: var(--base-txt-alert-major)}
.chip ws-icon.chip-left-icon.chip-left-icon-color-red {--icon-color: var(--base-txt-alert-major);}

.chip .proj_color {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 4px;
}
.chip .proj_color ws-emoji {width: 14px; height: 14px}


.chip.chip-plain:not(.chip-disabled, .chip-info):hover {background: var(--base-hlt-g-hover)}
.chip.chip-plain ws-icon.cross-attr {border-left: 1px solid transparent}
.chip.chip-plain:not(.chip-info):hover ws-icon.cross-attr {border-left: 1px solid var(--base-line-tertiary)}
.chip.chip-plain > span:not([class]) {color: var(--base-txt-primary)}

.chip.chip-outline {box-shadow: 0 0 0 1px var(--base-line-secondary) inset}
.chip.chip-outline:not(.chip-disabled, .chip-info, .chip-no-hover):hover {box-shadow: 0 0 0 1px var(--base-line-accent) inset}
.chip.chip-outline:has([class*="av_sm"]) {outline: 1px solid var(--base-line-secondary);outline-offset: -1px;box-shadow: none}
.chip.chip-outline:not(.chip-disabled, .chip-info):has([class*="av_sm"]):hover {outline: 1px solid var(--base-line-accent);outline-offset: -1px}
.chip.chip-outline.chip-disabled {box-shadow: 0 0 0 1px var(--colors-graphite-trans-300) inset}

.chip.chip-fill {background: var(--base-hlt-g-hover)}
.chip.chip-fill:not(.chip-disabled, .chip-info,.chip-bg-blue):hover {box-shadow: 0 0 0 1px var(--base-line-accent) inset}
.chip.chip-fill:has([class*="av_sm"]) {outline: 1px solid transparent;outline-offset: -1px;box-shadow: none}
.chip.chip-fill:not(.chip-disabled, .chip-info):has([class*="av_sm"]):hover {outline: 1px solid var(--base-line-accent);outline-offset: -1px}
.chip.chip-fill.chip-disabled {background: var(--base-hlt-g-easy)}

.chip.chip-dashed {outline: 1px dashed var(--base-line-primary); outline-offset: -1px}
.chip.chip-dashed:not(.chip-disabled, .chip-info, .chip-no-hover):hover {outline: 1px dashed var(--base-line-accent)}
.chip.chip-dashed.chip-disabled {outline: 1px dashed var(--base-txt-ghost); outline-offset: -1px}

.chip.chip-alert {outline: 1px dashed var(--base-txt-alert-minor); outline-offset: -1px}
.chip.chip-alert:hover {outline: 1px dashed var(--base-txt-alert-major)}
.chip.chip-alert ws-icon {--icon-color: var(--base-txt-btn-w)}
.chip.chip-alert:hover ws-icon {--icon-color: var(--base-txt-alert-major)}
.chip.chip-alert ws-icon.cross-attr {border-left: 1px solid var(--base-txt-btn-w)}
.chip.chip-alert ws-icon.cross-attr:hover {background: var(--base-hlt-w-hover)}
.chip.chip-alert > span:not([class]) {color: var(--base-txt-btn-w)}
.chip.chip-alert:hover > span:not([class]) {color: var(--base-txt-alert-major)}

.chip.chip-disabled {pointer-events: none; cursor: default}
.chip.chip-disabled ws-icon, .chip.chip-disabled:hover ws-icon {--icon-color: var(--base-txt-muted)}
.chip.chip-disabled > span:not([class]), .chip.chip-disabled:hover > span:not([class]) {color: var(--base-txt-muted)}


.chip.chip-16 {height: 16px; padding-left: 2px; border-radius: 5px}
.chip.chip-16 ws-icon, .chip.chip-16 svg {width: 12px; height: 12px}
.chip.chip-16 > span:not([class]) {padding: 0 3px; font: var(--font-ui-10-nano-reg)}
.chip.chip-20 {height: 20px; padding-left: 2px; border-radius: 6px}
.chip.chip-20 > span:not([class]) {padding: 0 3px}
.chip.chip-28 {height: 28px; padding-left: 6px; border-radius: 8px}
.chip.chip-28 > span:not([class]) {padding: 0 5px}
.chip.chip-32 {height: 32px; padding-left: 6px; border-radius: 10px}
.chip.chip-32 ws-icon, .chip.chip-32 svg {width: 20px; height: 20px}
.chip.chip-32 > span:not([class]) {padding: 0 6px; font: var(--font-ui-13-small-reg)}

.chip.chip-rounded {border-radius: 24px}

.chip.chip-bg {background: var(--base-cont-mod-top)}
.chip.chip-bg-blue{background: var(--base-hlt-hover); border-radius: 12px;}
.chip.chip-bg-blue:hover{box-shadow: 0 0 0 1px var(--base-txt-btn-a) inset;}


/*.chip:not(.chip-disabled, .chip-info)[class*="chip-bg-"]:hover {box-shadow: 0 0 0 1px var(--colorize-lbl-txt-ghost) inset}*/

.chip.chip-info {cursor: default}


.chip.chip-group {height: 28px;padding: 0 6px 0 2px;border-radius: 24px;box-shadow: var(--shadow-cont-major-lineonly-inside);}
.chip.chip-group:not(.chip-info):hover {box-shadow: 0 0 0 1px var(--base-line-accent) inset}
.chip.chip-group ws-icon.chip-left-icon {width: 24px; height: 24px; --icon-color: var(--base-txt-primary)}
.chip.chip-group.chip-group-team ws-icon {--icon-color: var(--base-txt-alt-light)}
.chip.chip-group.chip-group-dept ws-icon.chip-left-icon {border-radius: 100px; background: var(--base-hlt-invert); --icon-color: var(--base-txt-alt-light)}
.chip.chip-group.chip-group-dept.chip-group-dept-client ws-icon.chip-left-icon {background: var(--base-hlt-b-invert)}
.chip.chip-group.chip-group-dept > span:not([class]) {padding-left: 6px}
.chip.chip-group > span:not([class]) {padding: 0 4px 0 2px; font: var(--font-ui-12-mini-semi); color: var(--base-txt-primary)}
.chip.chip-group.chip-group-team > span:not([class]) {color: var(--base-txt-alt-light)}
.chip.chip-group.chip-group-team {background: var(--base-hlt-invert)}
.chip.chip-group.chip-group-team:not(.chip-info):hover {box-shadow: 0 0 0 1px var(--base-line-accent) inset}
.chip.chip-group.chip-group-team-client {background: var(--base-hlt-b-invert)}
.chip.chip-group.chip-group-team-all {
	background: var(--base-txt-btn-c);
	ws-icon {
		--icon-color: var(--base-txt-alt-light);
	}
	&> span:not([class]) {
		color: var(--base-txt-alt-light);
	}
}


ws-chip:has(.chip-invite) {overflow: unset;}
.chip.chip-invite {height: 28px;padding: 0 6px;border-radius: 6px;box-shadow: var(--shadow-cont-major-lineonly-inside);background: var(--base-cont-mod-top)}
.chip.chip-invite:has(ws-icon.chip-left-icon) {padding-left: 4px}
.chip.chip-invite:hover {box-shadow: var(--shadow-cont-major-lineonly-outside);}
.chip.chip-invite ws-icon.chip-left-icon {width: 20px; height: 20px}
.chip.chip-invite > span:not([class]) {font: var(--font-ui-13-small-reg); color: var(--base-txt-accent)}
.chip.chip-invite:has(ws-icon.chip-left-icon[name^="folder"]) > span:not([class]) {font-weight: 590}
.chip.chip-invite:not(:has(ws-icon.chip-left-icon)) > span:not([class]) {font-weight: 510}
.chip.chip-invite.chip-bg-green {background: #4FBE2933}
.chip.chip-invite.chip-bg-red {background: var(--base-hlt-w-pressed)}


.chip.chip-filter {height: 28px; padding: 0 6px; border-radius: 24px; outline: 1px solid var(--base-hlt-b-active); outline-offset: -1px; background: var(--base-hlt-b-selected)}
.chip.chip-filter:hover {background: var(--base-hlt-b-invert-major)}
.chip.chip-filter .av_sm {display: flex; align-items: center; justify-content: center; width: 28px; height: 28px}
.chip.chip-filter ws-icon {width: 20px;height: 20px;--icon-color: var(--base-txt-btn-b);}
.chip.chip-filter:hover ws-icon {--icon-color: var(--base-txt-alt-light);}
.chip.chip-filter > span:not([class]), .chip.chip-filter:has([class*="av_sm"]) > span:not([class]) {padding: 0 6px; font: var(--font-ui-12-mini-med); color: var(--base-txt-btn-b)}
.chip.chip-filter:hover > span:not([class]) {color: var(--base-txt-alt-light)}
.chip.chip-filter-trans {outline: 1px solid var(--base-hlt-b-invert-major); outline-offset: -1px; background: transparent}

.chip:has([class*="av_sm"]) {padding-left: 0}
.chip:has([class*="av_sm"]) > span:not([class]) {color: var(--base-txt-primary)}
.chip:has([class*="av_sm"]).chip-28 > span:not([class]) {padding: 0 4px; font: var(--font-ui-12-mini-med)}
.chip:has([class*="av_sm"]).chip-32 > span:not([class]) {padding: 0 4px; font: var(--font-ui-13-small-med)}
/*.chip.chip-28 img.av_sm {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px}*/
/*.chip.chip-32 img.av_sm {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px}*/

.chip.chip-32.chip-bg-blue ws-icon {
	width: 32px;
	height: 32px;
	border-left: 1px solid transparent;
}

.chip.chip-bg-blue ws-icon.cross-attr:hover {
	background: var(--base-txt-btn-a);
	--icon-color: var(--base-txt-btn-flip);
}

.chip.chip-av {padding-left: 4px;}
.chip.chip-16.chip-av {padding-left: 2px;}
.chip.chip-20.chip-av {padding-left: 3px;}

.chip.chip-16.chip-av img.av_sm, .chip.chip-av ws-icon.av_sm {width: 12px;height: 12px}
.chip.chip-16.chip-av span.av_sm {scale: 0.5;margin: 0 -6px}
.chip.chip-16.chip-av ws-icon.av_sm svg {width: 8px;height: 8px}

.chip.chip-20.chip-av img.av_sm, .chip.chip-av ws-icon.av_sm {width: 14px;height: 14px}
.chip.chip-20.chip-av span.av_sm {scale: 0.583;margin: 0 -5px}
.chip.chip-20.chip-av ws-icon.av_sm svg {width: 10px;height: 10px}

.chip.chip-av img.av_sm, .chip.chip-av ws-icon.av_sm {width: 16px;height: 16px}
.chip.chip-av span.av_sm {scale: 0.666;margin: 0 -4px}
.chip.chip-av ws-icon.av_sm svg {width: 10px;height: 10px}

.chip.chip-28.chip-av img.av_sm, .chip.chip-28.chip-av ws-icon.av_sm {width: 20px;height: 20px}
.chip.chip-28.chip-av span.av_sm {scale: 0.833;margin: 0 -2px}
.chip.chip-28.chip-av ws-icon.av_sm svg {width: 14px;height: 14px}

.chip.chip-32.chip-av .av_sm {width: 24px;height: 24px;scale: 1;margin: 0}
.chip.chip-32.chip-av ws-icon.av_sm svg {width: 16px;height: 16px}

.chip.chip-16:has([class="dot_tags"]) {padding-left: 2px; padding-right: 2px}
.chip.chip-20:has([class="dot_tags"]) {padding-left: 0; padding-right: 2px}
.chip.chip-16 ws-icon, .chip.chip-16 svg {width: 12px; height: 12px}
.chip:has([class="dot_tags"]) > span:not([class]) {padding: 0 2px; font: var(--font-ui-12-mini-med)}
.chip:has([class="dot_tags"]) > span:not([class]):has(+ ws-icon.cross-attr) {padding-right: 4px}
.chip.chip-16:has([class="dot_tags"]) > span:not([class]) {font: var(--font-ui-10-nano-med)}
.chip.chip-20:has([class="dot_tags"]) > span:not([class]) {font: var(--font-ui-12-mini-reg)}
.chip .dot_tags {padding: 0 5px 0 3px}
.chip .dot_tags span {width: 10px; height: 10px; border-radius: 5px}
.chip.chip-16 .dot_tags {padding: 0 3px}
.chip.chip-16 .dot_tags span {width: 8px; height: 8px; border-radius: 4px}

.chip.chip-mono > span:not([class]) {
	font-family: var(--font-mono);
}

.chip .space {width: 32px;}
.chip ws-emoji {width: 20px;height: 20px;}
.chip.chip-16 ws-emoji {width: 16px; height: 16px;}

/* TERM */
.chip--term-pending {
	font: var(--font-ui-12-mini-med);
	color: var(--base-txt-tertiary);
}
.chip--term-regular {
	font: var(--font-ui-12-mini-med);
	color: var(--base-txt-secondary);
}
.chip--term-on-week {
	font: var(--font-ui-12-mini-med);
	color: var(--base-txt-primary);
}
.chip--term-days-left {
	font: var(--font-ui-12-mini-reg);
	color: var(--base-txt-btn-b);
	background-color: var(--base-hlt-b-selected);
}
.chip--term-tomorrow {
	font: var(--font-ui-12-mini-med);
	color: var(--base-txt-btn-b);
}
.chip--term-today,
.chip--term-hours-left {
	font: var(--font-ui-12-mini-med);
	color: var(--colorize-lbl-txt-accent);
	background-color: var(--lbl-today-minor);
}
.chip--term-overdue {
	font: var(--font-ui-12-mini-reg);
	color: var(--base-txt-alert-major);
	background-color: var(--base-hlt-w-hover);
}
.chip--term-short-overdue {
	font: var(--font-ui-12-mini-med);
	color: var(--base-txt-alert-major);
}
.chip.chip--term > span:not([class]),
.chip.chip--term:hover > span:not([class]) {
	color: inherit;
	font-weight: inherit;
}
/* /TERM */

.chip.chip-a {
	--chip-content-color: var(--base-btn-primary-minor);
	&> span:not([class]) {
		color: var(--chip-content-color) !important;
	}
	ws-icon {
		--icon-color: var(--chip-content-color) !important;
	}
	&:hover {
		--chip-content-color: var(--base-btn-primary-major);
	}
	&.chip-dashed {
		outline-color: var(--base-hlt-pressed) !important;
		&:hover {
			outline-color: var(--base-hlt-active);
		}
	}
}

@media (max-width: 480px) {
	/* компактні чіпси на мобілі (без тексту) */
	.chip.chip-mobile-compact span:not([class]) {
		display: none !important;
	}
}