.tasks-field-highlight {
	--highlight-offset-y: 0px;
	--highlight-offset-x: 0px;
	--highlight-background: var(--ui-color-base-8);
	--border-width: var(--ui-border-width-thick);
	--border-radius: var(--ui-border-radius-md);
	transform-style: preserve-3d;
	transform: translateZ(0);
}

.tasks-field-highlight:before {
	content: '';
	position: absolute;
	inset: var(--highlight-offset-y) var(--highlight-offset-x);
	background: var(--highlight-background);
	transform: translateZ(-1px);
	border-radius: var(--border-radius);
}

.tasks-field-highlight:after {
	content: '';
	position: absolute;
	inset: calc(var(--highlight-offset-y) - var(--border-width)) calc(var(--highlight-offset-x) - var(--border-width));
	background: conic-gradient(
		from 0deg at 50% 51.19%,
		var(--ui-color-accent-main-primary) 0deg,
		var(--ui-color-green-25) 180deg,
		var(--ui-color-accent-main-primary) 360deg
	);
	transform: translateZ(-2px);
	border-radius: calc(var(--border-radius) + var(--border-width));
	animation: 200ms tasks-field-highlight-transition forwards;
}

@keyframes tasks-field-highlight-transition {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.tasks-field-highlight.--animate:after {
	animation: 1500ms tasks-field-highlight forwards;
}

@keyframes tasks-field-highlight {
	from {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}