#tasks-nav {
	@media (width < 40rem) {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
	}
}

#tasks-todo,
#tasks-completed {
	display: flex;
	flex-direction: column;
	gap: calc(2 * var(--spacing));
	padding-top: var(--content-padding);

	@media (width < 40rem) {
		padding: var(--content-padding);
		padding-top: calc(var(--content-padding) + var(--tabs-padding));
	}
}

.task-lineitem {
	position: relative;

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

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

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