.entry-comments {
	max-width: var(--comments-max-width, none);
	margin: var(--comments-margin, (var(--spacing-xxl) auto));
}

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

.comment {
	position: relative;
	margin: var(--comment-margin, 0 0 var(--spacing-md));
	padding: var(--comment-padding, var(--spacing-xl));
	background: var(--comment-background, unset);
	border: var(--comment-border, var(--border));
	border-radius: var(--comment-border-radius, var(--border-radius));
	box-shadow: var(--comment-box-shadow, var(--shadow));

	.children {
		margin: var(--spacing-lg) 0 0;
		list-style-type: none;
	}

	.comment {
		margin-right: calc(var(--spacing-xl) * -1 - var(--border-width)); /* Make all child comments flush to right, over border as well */
		box-shadow: none;

		&:last-child {
			margin-bottom: calc(var(--spacing-xl) * -1 - var(--border-width)); /* Make all child comments flush to bottom, over border as well */
			border-width: var(--border-width) 0 0 var(--border-width);
		}
	}
}

.comment-header {
	display: flex;
	flex-wrap: wrap;
}

.comment-author {
	display: flex;
	place-items: center;
	margin-right: auto;
	font-family: var(--heading-font-family);

	.avatar {
		margin-right: var(--spacing-sm);
	}
}

.comment-meta {
	font-size: var(--font-size-xs);
}

.comment-content {
	margin-bottom: var(--spacing-md);

	a {
		word-break: break-all;
	}
}

.comment-reply {
	text-align: end;
}

.comment-edit-link {
	position: absolute;
	top: 0;
	right: 0;
	padding: var(--spacing-sm);
	color: var(--color-body);
	font-size: 0.75rem;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0.5;
}

.comment-edit-link:hover,
.comment-edit-link:focus-visible {
	color: var(--color-link);
	opacity: 1;
}

.comment-respond {
	width: 100%;
	max-width: var(--comments-max-width, none);
	margin: var(--comments-margin, (var(--spacing-xxl) auto));
}

.comment-reply-title {
	display: flex;
	gap: 0.5em;
	align-items: center;
}

.cancel-comment-reply-link {
	font-size: var(--font-size-sm);
}