.comments {
	&-area {
		position: relative;
		margin-bottom: 60px;
		border-top: 1px solid $color__background-hr;
		padding-top: 30px;
		@include media-breakpoint-up(lg) {
			padding-top: 60px;
		}
	}
	&-title {
		margin-bottom: 30px;
	}
}

.comment {
	&-list {
		margin: 0;
		padding: 0 0 30px;
		list-style: none;
		@include media-breakpoint-up(lg) {
			padding-bottom: 75px;
		}
		.children {
			margin-left: 0;
			padding-left: 5px;
			list-style: none;
			margin-top: 20px;
			@include media-breakpoint-up(md) {
				padding-left: 10px;
			}
			@include media-breakpoint-up(lg) {
				padding-left: 15px;
			}
		}
		> .comment,
		> .ping {
			&.depth-1.parent > .children {
				@include media-breakpoint-up(xl) {
					padding-left: 100px;
				}
			}
			& + .comment,
			& + .ping {
				margin-top: 20px;
				@include media-breakpoint-up(lg) {
					margin-top: 40px;
				}
			}
		}
	}
	&-body {
		&__holder {
			position: relative;
			display: flex;
		}
		.avatar {
			width: 40px;
			margin: 0 15px 10px 0;
			border-radius: 50%;

			@include media-breakpoint-up(lg) {
				width: auto;
				margin: 0 30px 15px 0;
			}
		}
		.fn {
			display: block;
			margin-bottom: 2px;
		}
		.reply {
			line-height: 1.5;
		}
	}
	&-content-wrap {
		padding: 15px 25px;
		position: relative;
		@include border-radius();
		flex: 0 1 100%;
		@include media-breakpoint-up(lg) {
			padding: 25px 40px 35px;
		}
		&:before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 8px 8px 8px 0;
			top: 12px;
			right: 100%;
			@include media-breakpoint-up(lg) {
				border-width: 11px 12px 11px 0;
				top: 25px;
			}
		}
	}
	&-author {
		flex-shrink: 0;
	}
	&-content {
		margin-top: 5px;
		> *:last-child {
			margin-bottom: 0;
		}
		p {
			line-height: 1.7142;
			margin-bottom: 1em;
			&:last-child {
				margin-bottom: 0;
			}
		}
		a {
			word-wrap: break-word;
		}
	}
	&-reply-link {
		font-style: italic;
	}
	&-date {
		display: block;
		font-style: italic;
		&__time {
			display: inline-block;
			vertical-align: top;
		}
	}
}

.bypostauthor {
	display: block;
}