.comments-area {
}

.comments-title,
.comment-list,
.comment-respond {
	background: $color__background-body;
	margin: 0 auto;
	max-width: $size__site-max-width;
	width: 100%;
	padding: $size__vertical-padding #{$size__horizontal-padding / 2};
}

.comments-title {
	background: $color__theme-link;
	color: $color__background-body;
	margin: 0 auto;
}

.comment-reply-title {
	margin-top: 0;
}

.comment-body {
	border-bottom: 1px solid $color__background-hr;
	margin: 0 #{$size__horizontal-padding / 2};
	padding: $size__horizontal-padding 0;

	.reply {
		font-style: italic;
		margin-bottom: 1rem;
		float: right;
	}
}

.reply-indicator {
	color: $color__background-hr;
}

.comment-meta {
	color: $color__background-hr;
	font-style: italic;

	.comment-author {
		margin-left: .5rem;
	}

	.avatar {
		height: 20px;
		width: 20px;
	}

	& > * {
		vertical-align: middle;
	}
}

.comment-content p {
	margin: 0 0 1rem;
}

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

.bypostauthor {
	display: block;
}

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

	ol {
		margin-left: 0;
		padding-left: 0;
	}

	.comment .reply-indicator {
		position: absolute;
		top: 2rem;

		svg {
			height: 1rem;
			width: 1rem;
		}
	}

	.children .comment {
		position: relative;
	}

	.children .depth-2 {

		article {
			margin-left: #{$size__horizontal-padding * 1.5 };
		}

		.reply-indicator {
			left: #{$size__horizontal-padding / 2};
		}
	}

	.children .depth-3,
	.children .depth-4,
	.children .depth-5 {

		article {
			margin-left: #{$size__horizontal-padding * 2.5};
		}

		.reply-indicator {
			left: #{$size__horizontal-padding * 1.5};
		}
	}
}

.comment-form input {
	max-width: 100%;
}

.comment-form input[type="checkbox"] {
	margin-right: 0.5em;
}

@media screen and (min-width: 740px) {

	.comments-title,
	.comment-list,
	.comment-respond {
		padding: $size__vertical-padding $size__horizontal-padding;
	}

	.comment-body {
		margin: 0;
	}
}

@media screen and (min-width: 940px) {

	.comments-area {
		margin-left: auto;
		margin-right: auto;
		max-width: $size__site-max-width-wide;
		position: relative;

		.comment {
			position: relative;
		}

		.avatar {
			height: 44px;
			width: 44px;
			position: absolute;
			left: -6rem;
			top: 2rem
		}
	}

	.comment-meta .comment-author {
		margin-left: 0;
	}

	.comment-list {
		.children .depth-4 {

			article {
				margin-left: #{$size__horizontal-padding * 3.5};
			}

			.reply-indicator {
				left: #{$size__horizontal-padding * 2.5};
			}
		}

		.children .depth-5 {

			article {
				margin-left: #{$size__horizontal-padding * 4.5};
			}

			.reply-indicator {
				left: #{$size__horizontal-padding * 3.5};
			}
		}
	}

}

@media screen and (min-width: 1400px) {

	.comments-area {
		position: relative;
		left: calc( 180px - #{$size__horizontal-padding} );
	}
	
}