.tasks--ui-tabs {
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-stack-xs);
	width: 100%;
}

.tasks--ui-tabs--tab-list {
	display: flex;
	flex-flow: row nowrap;
	height: 34px;
}

.tasks--ui-tabs--tab {
	--tasks-ui-tabs-tab-border-radius: var(--ui-border-radius-md);

	flex: 1;
	padding: 0 24px;
	border: 1px solid var(--ui-color-gray-10);
	background-color: var(--ui-color-bg-content-primary);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-user-select: none;
	        user-select: none;
	transition: background-color 200ms ease-in-out;
}

.tasks--ui-tabs--tab:first-child {
	border-top-left-radius: var(--tasks-ui-tabs-tab-border-radius);
	border-bottom-left-radius: var(--tasks-ui-tabs-tab-border-radius);
}

.tasks--ui-tabs--tab:not(:first-child) {
	border-left: none;
}

.tasks--ui-tabs--tab:last-child {
	border-top-right-radius: var(--tasks-ui-tabs-tab-border-radius);
	border-bottom-right-radius: var(--tasks-ui-tabs-tab-border-radius);
}

.tasks--ui-tabs--tab.--active {
	background-color: var(--ui-color-design-tinted-bg);
	border-color: var(--ui-color-design-tinted-bg);
}

.tasks--ui-tabs--tab-text {
	color: var(--ui-color-gray-70);
}

.tasks--ui-tabs--tab-text-active {
	color: var(--ui-color-accent-soft-element-blue);
}

.tasks--ui-tabs--tab:not(.--active):hover .tasks--ui-tabs--tab-text {
	color: var(--ui-color-gray-90);
}

.tab-content-enter-active,
.tab-content-leave-active {
	transition: opacity 0.2s ease-in-out;
}

.tab-content-enter-from,
.tab-content-leave-to {
	opacity: 0;
}