wp_back/wp-content/themes/twentytwentyone/assets/sass/06-components/comments.scss

/**
 * Comments Wrapper
 */
.comments-area {

	> * {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	&.show-avatars {

		.avatar {
			border-radius: 50%;
			position: absolute;
			top: 10px;
		}

		.fn {
			display: inline-block;
			padding-left: 85px;
		}

		.comment-metadata {
			padding: 8px 0 9px 85px;
		}

	}
}

/**
 * Comment Title
 */

.comments-title,
.comment-reply-title {
	font-size: var(--heading--font-size-h2);
	letter-spacing: var(--heading--letter-spacing-h2);
}

.comment-reply-title {
	display: flex;
	justify-content: space-between;

	small {

		a {
			font-family: var(--global--font-secondary);
			font-size: var(--global--font-size-xs);
			font-style: normal;
			font-weight: normal;
			letter-spacing: normal;
		}
	}
}

/* Nested comment reply title*/
.comment .comment-respond .comment-reply-title {
	font-size: var(--global--font-size-lg);
}

/**
 * Comment Lists
 */
.comment-list {
	padding-left: 0;
	list-style: none;

	> li {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);
	}

}

.comment-list .children {
	list-style: none;
	padding-left: 0;

	> li {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);
	}

}

.comment-list .depth-2,
.comment-list .depth-3 {
	@include media(mobile) {
		padding-left: calc(4 * var(--global--spacing-horizontal));
	}
}

/**
 * Comment Meta
 */
.comment-meta {

	.comment-author {
		line-height: var(--global--line-height-heading);
		margin-bottom: calc(0.25 * var(--global--spacing-unit));

		@include media(mobile) {
			margin-bottom: 0;
			padding-right: 0;
		}

		.fn {
			font-family: var(--global--font-secondary);
			font-weight: normal;
			font-size: var(--global--font-size-lg);
			hyphens: auto;
			word-wrap: break-word;
			word-break: break-word;
		}

	}

	.comment-metadata {
		color: var(--global--color-primary);
		font-size: var(--global--font-size-xs);
		padding: 8px 0 9px 0;

		.edit-link {
			margin-left: var(--global--spacing-horizontal);
		}

	}

	@include media(mobile) {
		margin-right: inherit;

		.comment-author {
			max-width: inherit;
		}
	}
}

.reply {
	font-size: var(--global--font-size-sm);
	line-height: var(--global--line-height-heading);
}

.bypostauthor {
	display: block;
}

.says {
	display: none;
}

.pingback .url,
.trackback .url {
	font-family: var(--global--font-primary);
}

// Comment body
.comment-body {
	position: relative;
	margin-bottom: calc(1.7 * var(--global--spacing-vertical));

	> * {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);
	}

	.reply {
		margin: 0;
	}
}

.comment-content {
	word-wrap: break-word;
}

// Pingbacks & Trackbacks
.pingback .comment-body,
.trackback .comment-body {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}

.comment-respond {
	margin-top: var(--global--spacing-vertical);
}

.comment-respond > * {
	margin-top: var(--global--spacing-unit);
	margin-bottom: var(--global--spacing-unit);

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;

		&.comment-form {
			margin-bottom: var(--global--spacing-vertical);
		}
	}
}

.comment-author {
	padding-top: 3px;

	.url {
		color: currentColor;
	}
}

.comment-form {
	display: flex;
	flex-wrap: wrap;

	> * {
		flex-basis: 100%;
	}

	.comment-notes {
		font-size: var(--global--font-size-sm);
	}

	.comment-form-url,
	.comment-form-comment {
		width: 100%;
	}

	.comment-form-author,
	.comment-form-email {
		flex-basis: 0;
		flex-grow: 1;

		@include media(mobile-only) {
			flex-basis: 100%;
		}
	}

	.comment-form-cookies-consent > label,
	.comment-notes {
		font-size: var(--global--font-size-xs);
		font-weight: normal;
	}
}

.comment-form > p {
	margin-bottom: var(--global--spacing-unit);

	&:first-of-type {
		margin-top: 0;
	}

	&:last-of-type {
		margin-bottom: 0;
	}

	label,
	input[type="email"],
	input[type="text"],
	input[type="url"],
	textarea {
		display: block;
		font-size: var(--global--font-size-sm);
		margin-bottom: calc(.5 * var(--global--spacing-unit));
		width: 100%;
		font-weight: var(--form--label-weight);
	}

	&.comment-form-cookies-consent {
		display: flex;
	}

	@include media(mobile) {

		&.comment-form-author {
			margin-right: calc(1.5 * var(--global--spacing-horizontal));
		}

		&.comment-notes,
		&.logged-in-as {
			display: block;
		}
	}
}