#tasks-todo,
#tasks-completed {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.task-lineitem {
	position: relative;
	background-color: white;
	padding: var(--spacing-4);
	padding-left: calc(14 * var(--spacing));
	border-radius: var(--rounded-lg);

	h2 {
		font-size: var(--text-base);
		font-weight: 600;
		max-width: calc(100% - 13 * var(--spacing)); /* space for icon */
	}

	.icon {
		position: absolute;
		top: var(--spacing-4);
		right: var(--spacing-4);
		width: calc(5 * var(--spacing));
		height: calc(5 * var(--spacing));
		color: var(--color-neutral-200);
	}

	.btn.check {
		position: absolute;
		top: var(--spacing-4);
		left: var(--spacing-4);
	}

	.body {
		display: flex;
		flex-direction: column;
		gap: calc(1.5 * var(--spacing));
	}

	&.--unread {
		border: 2px solid var(--color-unread) !important;
	}

	&.--complete {
		padding-left: var(--spacing-4);
	}
}

.task {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);

	h2 {
		font-size: var(--text-xl);
		font-weight: 600;
	}

	.body {
		background-color: white;
		border-radius: var(--rounded-xl);
		border: 1px solid var(--color-neutral-200);
		padding: var(--spacing-4);
		display: flex;
		flex-direction: column;
		gap: calc(1.5 * var(--spacing));
	}
}