ws-slider {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: var(--base-cont-trans-low);
	border-radius: 6px;
	border: none;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

/*ws-slider.string { padding: 7px 7px; }*/
ws-slider a {
	color: var(--base-txt-tertiary);
	box-sizing: border-box;
	display: inline-flex;
	position: relative;
	align-items: center;
	z-index: 2;
	text-wrap: nowrap;
}

ws-slider:not(:has(i.bg.ani)) a.act {
	background: var(--base-cont-top-elevated);
}

ws-slider a.act {
	z-index: 3;
}

.modal__content ws-slider:not(:has(i.bg.ani)) a.act {
	background: var(--base-cont-mod-top);
}

/*ws-slider.string a { border-radius: 6px; }*/
ws-slider a svg {
	fill: var(--base-txt-tertiary);
}

ws-slider a.act svg {
	fill: var(--base-txt-tertiary);
}

ws-slider a:not(.act):hover {
	color: var(--base-txt-primary);
}

ws-slider a:not(.act, [disabled]):hover svg {
	fill: var(--base-txt-primary);
}

ws-slider a span {
	padding: 0 4px;
}

ws-slider i.bg {
	position: absolute;
	display: none;
	background: var(--base-cont-mod-top-elevated);
	box-shadow: var(--shadow-cont-major);
	z-index: 1;
}

.modal__content ws-slider i.bg {
	background: var(--base-cont-mod-top);
}

ws-slider a[disabled]:hover {
	color: var(--base-txt-tertiary);
	cursor: initial;
}

/* if something changes in future
ws-slider i.br {
	position: absolute;
	display: none;
	border-radius: 4px;
	box-shadow: 0 0 0 1px var(--base-hlt-b-invert-major) inset;
	z-index: 4;
}
ws-slider.string i {
	border: 2px solid var(--base-hlt-b-invert-major); border-radius: 6px;
}
*/
ws-slider i.ani {
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

/* COLORS & SIZES */
ws-slider.blue a.act {
	color: var(--base-txt-btn-a);
}

ws-slider.blue a.act svg {
	fill: var(--base-txt-btn-a);
}

ws-slider.violet a.act {
	color: var(--base-txt-btn-b);
}

ws-slider.violet a.act svg {
	fill: var(--base-txt-btn-b);
}

ws-slider.black a.act {
	color: var(--base-txt-accent);
}

ws-slider.black a.act svg {
	fill: var(--base-txt-accent);
}

ws-slider.h24 {
	border-radius: 6px;
}

ws-slider.h24 i.bg {
	border-radius: 4px;
}

ws-slider.h24 a {
	font: var(--font-ui-11-micro-med);
	padding: 0 6px;
	border-radius: 4px;
}

ws-slider.h24 a ws-icon {
	scale: 0.8;
}

ws-slider.h28 {
	border-radius: 8px;
}

ws-slider.h28 i.bg {
	border-radius: 6px;
}

ws-slider.h28 a {
	font: var(--font-ui-11-micro-med);
	padding: 4px 8px;
	border-radius: 6px;
}

ws-slider.h28 a ws-icon {
	scale: 0.8;
}

ws-slider.h32 {
	border-radius: 8px;
}

ws-slider.h32 i.bg {
	border-radius: 6px;
}

ws-slider.h32 a {
	font: var(--font-ui-12-mini-med);
	padding: 4px 10px;
	border-radius: 6px;
}

ws-slider.h32 a ws-icon {
}

ws-slider.h36 {
	border-radius: 10px;
}

ws-slider.h36 i.bg {
	border-radius: 8px;
}

ws-slider.h36 a {
	font: var(--font-ui-13-small-med);
	padding: 6px 12px;
	border-radius: 8px;
}

ws-slider.h36 a ws-icon {
	padding: 0 2px;
}

@media screen and (max-width: 480px) {
	ws-slider.mobile-h36 {
		border-radius: 10px;
	}

	ws-slider.mobile-h36 i.bg {
		border-radius: 8px;
	}

	ws-slider.mobile-h36 a {
		font: var(--font-ui-13-small-med);
		padding: 6px 12px;
		border-radius: 8px;
	}

	ws-slider.mobile-h36 a ws-icon {
		padding: 0 2px;
	}
}

ws-emoji {
	display: inline-block;
	vertical-align: text-bottom;
}

.last_act ws-icon[name="rex"] {
	display: none;
	--icon-color: var(--base-txt-ghost);
	--icon-size: 16px;
	width: 16px;
	height: 16px;
}
.last_act > span {
	display: block;
	width: 8px;
	height: 8px;
	border: 1.5px solid var(--base-txt-muted);
	border-radius: 100%;
}
.last_act + .in { color: var(--base-txt-tertiary); }
.last_act.today > span {
	border-color: var(--lbl-today-major);
	background: var(--lbl-today-major);
}
.last_act.yesterday > span {
	border-color: var(--lbl-yesterday-minor);
	background: var(--lbl-yesterday-minor);
}
.last_act.recently > span {
	border-color: var(--lbl-yesterday-minor);
	width: 6px;
	height: 6px;
	border-width: 3px;
}
.last_act.online + .in,
.last_act.today + .in,
.last_act.yesterday + .in,
.last_act.recently + .in { color: var(--base-txt-primary); }

.last_act.online > span {
    border-color: var(--base-txt-new-minor);
    background: var(--base-txt-new-minor);
}
.last_act.rex > span {
	display: none;
}
.last_act.rex ws-icon[name="rex"] {
	display: block;
}
.last_act.rex + .in { color: var(--base-txt-muted); }

.seen ws-icon:first-child svg {
	--fill-color: var(--base-txt-tertiary);
	fill: var(--fill-color) !important;
}

.unseen ws-icon:first-child svg {
	--fill-color: var(--base-txt-btn-a);
	fill: var(--fill-color) !important;
}

.seen_yesterday ws-icon:first-child svg {
	--fill-color: var(--lbl-yesterday-major);
	fill: var(--fill-color) !important;
}

.seen_today ws-icon:first-child svg {
	--fill-color: var(--base-txt-notice-minor);
	fill: var(--fill-color) !important;
}

.unseen.has_mention ws-icon:first-child svg {
	--fill-color: var(--base-txt-btn-w);
	fill: var(--fill-color) !important;
}

.unseen ws-icon:first-child use:first-child {
	display: none;
}
.seen ws-icon:first-child use:last-child {
	display: none;
}
.seen_empty ws-icon {
	opacity: 0;
}

a.seen:hover ws-icon,
a.unseen:hover ws-icon,
a.seen_empty:hover ws-icon {
	opacity: 1;
	scale: 1.2;
	transition: all 0.2s ease-in-out;
}

project-term .data > .indicator,
task-term .data > .indicator {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 28px;
	border: 1px solid var(--base-line-secondary);
	box-sizing: border-box;
	--icon-color: var(--base-txt-tertiary);
	padding: 3px;
	position: relative;
}

project-term .data.hot > .indicator, task-term .data.hot > .indicator { border-color: transparent; }

project-term .data > .indicator > .dot,
task-term .data > .indicator > .dot {
	display: block;
	width: 20px;
	height: 20px;
	background: var(--base-txt-secondary);
	border-radius: 20px;
}
project-term .data > .indicator > ws-icon,
task-term .data > .indicator > ws-icon,
project-term .data > .indicator > .dot > ws-icon,
task-term .data > .indicator > .dot > ws-icon {
	width: 20px;
	height: 20px;
}
project-term .data > .indicator > ws-icon,
task-term .data > .indicator > ws-icon {
	--icon-size: 16px;
}
project-term .data > .indicator > ws-icon[name="hourglass"],
task-term .data > .indicator > ws-icon[name="hourglass"] {
	--icon-size: 12px !important;
}

project-term.no_indicator .data > .indicator, task-term.no_indicator .data > .indicator { display: none; }

project-term .data.today > .indicator > ws-icon, task-term .data.today > .indicator > ws-icon { --icon-color: var(--lbl-today-major); }
project-term .data.today > .indicator > .dot, task-term .data.today > .indicator > .dot { background: var(--lbl-today-major); }

project-term .data.hot > .indicator > .dot, task-term .data.hot > .indicator > .dot {
	background: var(--base-hlt-w-selected);
	--icon-color: var(--base-txt-alert-minor);
}


project-term .data.muted > .indicator,
task-term .data.muted > .indicator,
project-term .data.muted span[class*="label"],
task-term .data.muted span[class*="label"] {
	display: none;
}
project-term .data.muted > .in,
task-term .data.muted > .in,
project-term .data.muted > .in > span,
task-term .data.muted > .in > span
{
	padding-left: 0 !important;
	color: var(--base-txt-muted) !important;
}

.pie_svg.pie_deadline circle.fill { stroke: transparent; }
.pie_svg.pie_progress circle.fill { stroke: var(--base-hlt-b-invert-minor); }
.pie_svg.pie_progress circle.draw,
.pie_svg.pie_deadline circle.draw {
	stroke: var(--lbl-today-major);
}


project-term .data > .indicator progress-pie,
task-term .data > .indicator progress-pie {
	padding: 0;
	margin: 0;
}
project-term .data > .indicator progress-pie .pie_progress,
task-term .data > .indicator progress-pie .pie_progress {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 28px;
	height: 28px;
}

span.tag ws-icon svg,
ws-icon.tag svg {
	fill: var(--tag-color) !important;
}
task-done-date ws-icon svg {
	fill: var(--base-txt-muted);
}
task-done-date ws-icon.err svg {
	fill: var(--base-txt-alert-minor);
}
task-done-date ws-icon.ok svg {
	fill: var(--base-txt-new-major);
}
task-done-date span.ok {
	color: var(--base-txt-new-major);
}
a project-term .data_place > ws-icon:first-child svg,
a task-term .data_place > ws-icon:first-child svg {
	fill: var(--base-txt-secondary)
}

project-term .data > ws-icon:first-child,
task-term .data > ws-icon:first-child {
	--icon-color: var(--base-txt-accent);
	--icon-size: 16px;
	border: 3.5px solid var(--base-hlt-b-pressed);
}
project-term .data > ws-icon[name="calendar_range"],
task-term .data > ws-icon[name="calendar_range"] {
	--icon-color: var(--base-txt-primary);
	border: none;
	position: relative;
}
project-term .wait > ws-icon[name="calendar_range"],
task-term .wait > ws-icon[name="calendar_range"],
task-term .related > ws-icon[name="calendar_range"] {
	--icon-color: var(--base-txt-btn-b);
	 background: var(--base-hlt-b-pressed);
}
project-term .hot > ws-icon:first-child,
task-term .hot > ws-icon:first-child {
	background: var(--base-hlt-w-selected);
	border: none;
}
project-term .hot > ws-icon:first-child svg,
task-term .hot > ws-icon:first-child svg {
	fill: var(--base-txt-btn-w);
}
project-term .hot > .in,
task-term .hot > .in {
	color: var(--base-txt-btn-w);
}
project-term .today > ws-icon:first-child,
task-term .today > ws-icon:first-child {
	background: var(--lbl-today-minor);
	border: none;
}
project-term .tomorrow > ws-icon:first-child,
task-term .tomorrow > ws-icon:first-child,
project-term .warm > ws-icon:first-child,
task-term .warm > ws-icon:first-child {
	border: none;
}
task-term .tomorrow > ws-icon:first-child:before,
task-term .tomorrow > ws-icon:first-child:after,
task-term .warm > ws-icon:first-child:before,
task-term .warm > ws-icon:first-child:after,
project-term .tomorrow > ws-icon:first-child:before,
project-term .tomorrow > ws-icon:first-child:after,
project-term .warm > ws-icon:first-child:before,
project-term .warm > ws-icon:first-child:after,
project-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:before,
project-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:after,
task-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:before,
task-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:after {
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 14px;
}
project-term .tomorrow > ws-icon[name="calendar_date"]:before,
task-term .tomorrow > ws-icon[name="calendar_date"]:before {
	z-index: -1;
	background: conic-gradient(var(--lbl-today-minor) 83%, transparent 17%);
}
project-term .tomorrow > ws-icon[name="calendar_date"]:after,
task-term .tomorrow > ws-icon[name="calendar_date"]:after {
	background: conic-gradient(transparent 83%, var(--base-hlt-b-pressed) 17%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px));
}
project-term .warm > ws-icon[name="calendar_date"]:before,
task-term .warm > ws-icon[name="calendar_date"]:before {
	z-index: -1;
	background: conic-gradient(var(--lbl-today-minor) 17%, transparent 0%);
}
project-term .warm > ws-icon[name="calendar_date"]:after,
task-term .warm > ws-icon[name="calendar_date"]:after {
	background: conic-gradient(transparent 17%, var(--base-hlt-b-pressed) 0%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px));
}
project-term .related > ws-icon:first-child,
task-term .related > ws-icon:first-child {
	background: var(--base-hlt-b-pressed);
	--icon-color: var(--base-txt-btn-b);
	border: none;
}
project-term .wait > .in,
task-term .wait > .in {
	color: var(--base-txt-tertiary);
}
project-term .data > .in .gray,
task-term .data > .in .gray {
	color: var(--base-txt-tertiary);
}
project-term .wait > .in .gray,
task-term .wait > .in .gray {
	color: var(--base-txt-primary);
}
project-term .data > ws-icon[name="calendar_range"]:before,
task-term .data > ws-icon[name="calendar_range"]:before {
	background: conic-gradient(var(--base-hlt-b-invert-minor) 100%, transparent 0%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px));
}
project-term .data > ws-icon[name="calendar_range"]:after,
task-term .data > ws-icon[name="calendar_range"]:after {
	background: conic-gradient(var(--lbl-today-major) 0%, transparent 0%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px));
}
project-term .warm > ws-icon[name="calendar_range"]:after,
task-term .warm > ws-icon[name="calendar_range"]:after {
	background: conic-gradient(var(--lbl-today-major) 17%, transparent 0%);
}
project-term .tomorrow > ws-icon[name="calendar_range"]:after,
task-term .tomorrow > ws-icon[name="calendar_range"]:after {
	background: conic-gradient(var(--lbl-today-major) 83%, transparent 0%);
}
project-term .today > ws-icon[name="calendar_range"]:after,
task-term .today > ws-icon[name="calendar_range"]:after {
	background: conic-gradient(var(--lbl-today-major) 100%, transparent 0%);
}
task-term ws-icon[name=repeat] {
	width: 16px;
	height: 16px;
}
project-term span[class^=terms_label] + ws-icon,
task-term span[class^=terms_label] + ws-icon {
	margin-left: 4px;
}

a project-tags .data_place > ws-icon:first-child svg,
a project-stage .data_place > ws-icon:first-child svg,
a project-folder .data_place > ws-icon:first-child svg,
a project-assignee .data_place > ws-icon:first-child svg {
	fill: var(--base-txt-secondary)
}

project-folder ws-icon svg {
	fill: var(--folder-color);
}

/*project-term .data_place > ws-icon:first-child, project-term .data > ws-icon:first-child {*/
/*	border:1px solid var(--base-txt-tertiary)*/
/*}*/
/*a project-term .data_place > ws-icon:first-child {*/
/*	border: 1px dashed var(--base-txt-secondary);*/
/*}*/
/*a project-term .data_place > ws-icon:first-child svg {*/
/*	fill: var(--base-txt-secondary)*/
/*}*/
/*project-term .data > ws-icon:first-child {*/
/*	border: 3px solid var(--base-hlt-b-pressed);*/
/*}*/
/*project-term .hot > ws-icon:first-child {*/
/*	background: var(--base-hlt-w-pressed);*/
/*	border: none;*/
/*}*/
/*project-term .hot > ws-icon:first-child svg {*/
/*	fill: var(--base-txt-alert-major);*/
/*}*/
/*project-term .hot > .in {*/
/*	color: var(--base-txt-alert-major);*/
/*}*/
/*project-term .wait > ws-icon:first-child {*/
/*	border:1px solid var(--base-txt-tertiary)*/
/*}*/
/*project-term .wait > ws-icon:first-child svg {*/
/*	fill: var(--base-txt-tertiary);*/
/*}*/
/*project-term .wait > .in {*/
/*	color: var(--base-txt-tertiary);*/
/*}*/
/*project-term .data > .in .gray {*/
/*	color: var(--base-txt-tertiary);*/
/*}*/
/*project-term .wait > .in .gray {*/
/*	color: var(--base-txt-primary);*/
/*}*/

ws-slider.width {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
ws-slider.width a {
	flex-grow:1;
	text-align:center;
	place-content: center;
}

/*************************************************************/

ws-date-input {
	display: inline-flex;
	background: var(--base-cont-mod-top);
	gap: 3px;
}
ws-date-input .date-segment {
	border: none;
	padding: 0;
	margin: 4px 0;
	width: 30px;
	background: transparent;
}

ws-date-input .date-segment.day {
	text-align: right;
}

ws-date-input .date-segment.month {
	width: 35px; /* щоб вміщалося Июн, Серп тощо */
	text-align: center;
}

ws-date-input .date-segment.year {
	width: 50px;
	text-align: left;
}

ws-date-input, ws-date-input input {
	font: var(--font-ui-14-regular-semi);
	font-variant-numeric: tabular-nums;
}

ws-date-input.nodate, ws-date-input.nodate input {
	color: var(--base-txt-tertiary) !important;
}

ws-date-input .separator {
	display: none;
}

ws-date-input.focused .separator {
	display: inline-flex;
	width: 3px;
	height: 24px;
	align-items: flex-end;
}

ws-date-input.focused .separator:first-of-type {
	margin-left: 2px;
	margin-right: -8px;
}

ws-date-input.focused .separator:last-of-type {
	margin-right: 2px;
	margin-left: -8px;
}
ws-chart {
	display: block;
	width:100%;
	height: 40px;
}

.modal__header > tags-group-icon ws-icon {
	padding-left: 6px;
	width: 24px;
	height: 24px;
	--icon-size: 24px;
}
tags-group-icon ws-icon.tags_group_hidden {
	--icon-color: var(--base-txt-alert-major);
}
tags-group-icon ws-icon.tags_group_required {
	--icon-color: var(--base-txt-btn-w);
}
tags-group-chips {
	display: flex;
	gap: 8px;
	.chip > span:not([class]) {
		font: var(--font-ui-11-micro-reg);
		color: var(--base-txt-tertiary);
	}
	.chip.chip-tags-group-hidden:hover ws-icon {
		--icon-color: var(--base-txt-secondary);
	}
	.chip.chip-20.chip-tags-group-hidden {
		padding: 0 4px; /* to make it round 20x20 */
	}
}

ws-marquee {
	display: inline-flex;
	overflow: hidden;
	white-space: nowrap;
	max-width: 100%;
}

ws-code-input {
	display: block;
	.ws-code-input {
		display: flex;
		gap: 4px;
		.ws-code-input__input {
			padding-left: 0;
			padding-right: 0;
			text-align: center;
			width: 2ch;
			box-sizing: border-box;
		}
	}
}

ws-checkbox {
    display: inline-block;
}

task-timers {
	ws-icon { --icon-color: var(--costs-timer-warning);animation: act-timer-dot 1s ease-in-out infinite alternate; }
}
@keyframes act-timer-dot {
	0% { transform: scale(0.9); }
	100% { transform: scale(1.12); }
}

@container (width < 100px) {
	task-priority, task-assignee, task-stage {
		max-width: 100%;
		.in {
			max-width: 100%;
			display: none !important;
		}
	}
}
task-priority, task-assignee, task-stage {
	max-width: 100%;
	.data, .data_place {
		max-width: 100%;
	}
}