/* # Comments ===== */
#comments {
	padding: rem-calc(48 0);
}

#comments-number {
	font-size: rem-calc(18);
}

.comment-list {
	margin-bottom: 0;
}

/* ## Individual Comments ===== */
li.comment,
li.ping,
li.bypostauthor {
	padding: rem-calc(32 0 0 0);

	article {
		display: flex;
		max-width: 100%;
		margin-bottom: 0;
		padding-bottom: rem-calc(32);
		border-bottom: 1px solid $light-gray;

		&:last-child {
			border-bottom: none;
		}
	}
}

.comment-entry {
	flex: 0 1 auto;
	max-width: calc(100% - 60px);
	padding-left: rem-calc(32);
	color: #828282;
}

.comment-header {
	margin-bottom: rem-calc(20);
	@include clearfix;
}

/* ## Comment Avatars ===== */
.comment-avatar {
	flex: 0 0 rem-calc(60);
	width: rem-calc(60);

	img {
		border-radius: 1000px;
	}
}

/* ## Comment Meta===== */
.comment-meta {
	padding-top: rem-calc(4);
	margin-bottom: rem-calc(16);
	font-family: $header-font-family;

	cite {
		display: block;
		font-style: normal;
		line-height: 1;
		font-size: rem-calc(16);

		&:before {
			content: none;
		}

		.bypostauthor &,
		.bypostauthor & a {
			color: $warning-color;
		}
	}

	time,
	.comment-permalink,
	.comment-edit-link {
		font-size: rem-calc(12);
		font-style: italic;
		color: $dark-gray;
	}

	.comment-permalink,
	.comment-edit-link {
		&:before {
			content: '\00b7';
			padding: rem-calc(0 10 0 5);
			color: $black;
		}
	}

	.ping & {
		float: none;
	}
}

/* ## Comment Reply ===== */
.comment-reply-link {
	margin-top: rem-calc(8);
	margin-bottom: 0;
	text-align: right;
	font-size: rem-calc(12);
	color: $primary-color;
}

.comment-list {
	.children {
		margin-left: rem-calc(32);

		.comment-avatar {
			flex: 0 0 rem-calc(40);
			width: rem-calc(40);
		}
	}
}


/* ## Comment Form ===== */
#respond {
	padding: rem-calc(48 0);
}

#reply-title {
	font-size: rem-calc(18);
}

