#channels-list {
	> header {
		font-size: var(--text-xl);
		padding: calc(3 * var(--spacing)) calc(4 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);

		h3 { margin-bottom: 0 }

		@media (width < 40rem) { background: white }
	}
}

.channel {
	> a {
		display: flex;
		padding: calc(4 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);
		gap: calc(3 * var(--spacing));

		@media (width < 40rem) { background: white }
	}

	time { color: var(--text-color-secondary) }

	.channel-content {
		flex-grow: 1;
		min-width: 0;
	}

	.channel-header,
	.channel-body {
		display: flex;
		justify-content: space-between;
	}

	.channel-name {
		font-weight: 600;
		margin-bottom: calc(1 * var(--spacing));
	}

	.channel-latest {
		color: var(--text-color-secondary);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		&.unread {
			font-weight: bold;
			color: var(--text-color);
		}
	}

	.channel-badge {
		background-color: var(--color-unread);
		color: white;
		font-weight: 600;
		font-size: var(--text-xs);
		border-radius: var(--rounded-lg);
		padding: calc(0.5 * var(--spacing)) calc(2 * var(--spacing));
	}
}