/*
 * Comment list & form. Only enqueued on singular templates with comments open.
 */

.comments-area {
	max-width: var(--reading-width);
	margin-inline: auto;
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.comments-title {
	margin-bottom: var(--space-4);
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--space-5);
}

.comment-body {
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
}

.comment-author .avatar {
	border-radius: 50%;
}

.comment-metadata {
	font-size: 0.8rem;
	color: var(--color-muted);
}

.comment-form label {
	display: block;
	margin-bottom: var(--space-1);
	font-weight: 600;
}

.comment-form input,
.comment-form textarea {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	margin-bottom: var(--space-3);
	font-family: inherit;
	font-size: 1rem;
}