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

.task-lineitem {
	position: relative;
	background-color: white;
	padding: calc(4 * 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: calc(4 * var(--spacing));
		right: calc(4 * var(--spacing));
		width: calc(5 * var(--spacing));
		height: calc(5 * var(--spacing));
		color: var(--color-neutral-200);
	}

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

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

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

	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: calc(4 * var(--spacing));
		display: flex;
		flex-direction: column;
		gap: calc(1.5 * var(--spacing));
	}
}