.comments {
	&-area {
		position: relative;
		margin-bottom: 2em;
		@include media-breakpoint-up(lg) {
			margin-bottom: 4em;
		}
	}

	&-title {
		@include media-breakpoint-up(lg) {
			font-size: 18px;
			line-height: 1.4;
			margin-bottom: 1em;
		}
	}
}

.comment {

	&-list {
		margin: 0;
		padding: 0 0 3px;
		list-style: none;

		li:before {
			display: none;
		}

		.children {
			margin-left: 0;
			padding-left: 10px;
			list-style: none;

			.children {
				padding-left: 10px;

				@include media-breakpoint-up(lg) {
					padding-left: 20px;
				}
			}

			@include media-breakpoint-up(lg) {
				padding-left: 50px;
			}
		}
		> .comment,
		> .ping {
			margin-bottom: 10px;
		}
	}

	&-content {
		line-height: 28px;

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

	&-body {
		padding-top: 7px;
		padding-bottom: 10px;

		&__holder {
			position: relative;
			padding-right: 18px;
		}

		.avatar {
			float: left;
			width: 40px;
			margin: 0 15px 10px 0;
			border-radius: 50%;

			@include media-breakpoint-up(lg) {
				width: auto;
				margin: 3px 37px 15px -5px;
			}
		}

		.fn {
			margin-right: 10px;

			@include media-breakpoint-up(lg) {
				margin-right: 25px;
			}
		}

		.comment-metadata {
			font-size: 14px;
			margin-bottom: 7px;

			.material-icons {
				vertical-align: text-bottom;
				font-size: 21px;
				color: #888;
				margin-right: 10px;
			}
		}

		.reply {
			position: absolute;
			z-index: 9;
			top: 0;
			right: 0;
			transition: all 0.25s ease;
			opacity: .2;

			&:hover {
				opacity: 1;
			}
		}
	}
	&-reply-link {
		font-size: 17px;

		.material-icons {
			font-size: inherit;
		}
	}
	&-date {
		display: inline-block;

		&:before {
			font-size: 17px;
			margin-right: 4px;
			vertical-align: top;
			opacity: .2;

			@include material-icon();
			@include media-breakpoint-up(lg) {
				margin-right: 8px;
			}
		}

		&__time {
			display: inline-block;
			vertical-align: top;
		}
	}
}

.bypostauthor {
	display: block;
}

.comments-area {
	background: $color__comment-color;
	padding: 15px;

	@include media-breakpoint-up(lg) {
		padding: 11px 32px 34px;
	}

	.comments-title {
		text-transform: capitalize;
	}

	.comments-title,
	.comment-reply-title {
		padding-bottom: 14px;
		border-bottom: 1px solid $color__background-hr;
	}
}