/*
 * Softliro — comments.
 * Loaded only where a discussion exists or is open.
 */

.sl-comments {
	margin-top: var(--sl-section);
	padding-top: calc(var(--sl-section) / 2);
	border-top: var(--sl-border-w) solid var(--sl-hairline);
}

.sl-comments__title {
	font-size: var(--sl-h3);
	margin-bottom: 1.4em;
}

.sl-comments__list,
.sl-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-comments__list .children {
	margin-left: 28px;
	padding-left: 24px;
	border-left: var(--sl-border-w) solid var(--sl-hairline);
}

.sl-comments__list .comment,
.sl-comments__list .pingback {
	padding-block: 24px;
	border-bottom: var(--sl-border-w) solid var(--sl-hairline);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
	font-weight: 500;
}

.comment-author img {
	border-radius: var(--sl-radius);
}

.comment-metadata {
	margin-top: 4px;
	font-family: var(--sl-font-mono);
	font-size: 10px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--sl-muted);
}

.comment-metadata a {
	color: inherit;
}

.comment-content {
	margin-top: 14px;
	color: var(--sl-text-soft);
}

.comment-content > * + * {
	margin-top: 1em;
}

.reply {
	margin-top: 12px;
	font-family: var(--sl-font-mono);
	font-size: 10px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
}

.comment-respond {
	margin-top: 40px;
}

.sl-comment-form p {
	margin-bottom: 18px;
}

.sl-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	color: var(--sl-text-soft);
}

.sl-comment-form .comment-form-cookies-consent input {
	width: auto;
	margin-top: 4px;
}

.sl-comment-form .comment-form-cookies-consent label {
	margin: 0;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
	max-width: 420px;
}

.sl-comments__closed {
	font-family: var(--sl-font-mono);
	font-size: 11px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--sl-muted);
	margin-top: 24px;
}

.comment-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
	font-family: var(--sl-font-mono);
	font-size: 11px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
}