/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.comments-area {
	margin-top: 60px;
	word-break: break-word;

	.comments-title, .comment-reply-title {
		margin-top: 0;
		margin-bottom: 25px;
		font-family: $secondary_font;
		font-size: 0.8888em;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: $secondary_color;
	}//.comments-title

	ol {
		margin: 0;
		padding: 0;
		list-style: none;

		&.comment-list {
			margin-bottom: 50px;
		}//&.comment-list

	}//ol

	.comment-body {
		background: #f5f5f5;
		border: 1px solid #f0f0f0;
		padding: 20px 30px 20px 110px;
		margin-bottom: 10px;
		position: relative;
	}//.comment-body

	.bypostauthor > .comment-body {
		border-color: rgba($primary_color, 0.05);
		background: rgba($primary_color, 0.07);

		.vcard::before {
			content: "";
			background: $primary_color;
			width: 50px;
			height: 3px;
			position: absolute;
			top: 75px;
			left: 30px;
		}
	}

	.children {
		border-left: 1px solid #e5e5e5;
		margin-left: 15px;
		padding-left: 20px;

		li:last-child {
			margin-bottom: 10px;
			padding-bottom: 10px;
		}

		.comment-body {
			position: relative;

			&::before {
				content: "";
				background: #e5e5e5;
				width: 20px;
				height: 1px;
				position: absolute;
				left: -21px;
				top: 30px;
			}

		}//.comment-body

	}//.children

	.comment-author {
		display: inline-block;
		vertical-align: middle;
		line-height: 1.3;
	}//.comment-author

	.comment-meta {

		img {
			width: 50px;
			height: 50px;
			object-fit: cover;
			border-radius: 100%;
			position: absolute;
			top: 20px;
			left: 30px;
		}

		b {
			font-size: 0.7778em;
			font-family: $secondary_font;
			color: $secondary_color;
			letter-spacing: 0.5px;

			a {
				color: $secondary_color;

				&:hover {
					text-decoration: underline;
				}

			}//a

		}//b

		.says {
			display: none;
		}//.says

		.comment-awaiting-moderation {
		    display: block;
		    font-size: 0.8888em;
		    color: red;
		    line-height: 1.5;
		    margin-top: 5px;
		    margin-bottom: 10px;
		}//.comment-awaiting-moderation

	}//.comment-meta

	.comment-metadata {
		display: inline-block;
		padding-left: 10px;
		vertical-align: middle;
		line-height: 1.3;

		a {
			display: inline-block;
			color: #999;
			font-size: 0.7778em;
			font-weight: 700;
			letter-spacing: 0.5px;

			&:hover {
				color: $secondary_color;
			}

		}//a

	}//.comment-metadata

	.comment-content {
		font-size: 0.7778em;
		color: #999;
		font-weight: 700;
		letter-spacing: 0.5px;
		line-height: 1.7;

		p {
			margin-top: 10px;
			margin-bottom: 0;
		}//p

	}//.comment-content

	.reply {
		margin-top: 10px;
		text-align: right;

		.comment-reply-link {
			display: inline-block;
			font-size: 0.7778em;
			letter-spacing: 0.5px;
			color: $secondary_color;
			font-weight: 700;
			text-decoration: underline;

			&:hover {
				text-decoration: none;
			}

		}//.comment-reply-link

	}//.reply

	.comment-respond {
		background: #f0f0f0;
		padding: 30px 20px;
	}//.comment-respond

	.comment-form {

		p {
			margin-top: 0;
			margin-bottom: 10px;

			&.comment-notes {
				font-size: 0.7778em;
				font-weight: 700;
				color: #999;
				letter-spacing: 0.5px;
			}//&.comment-notes

			&.form-submit {
				margin-bottom: 0;
				margin-top: 20px;
			}

			label {
				display: block;
				font-size: 0.7778em;
				font-weight: 700;
				letter-spacing: 0.5px;
				margin-bottom: 5px;
				color: #999;
			}//label

			&.comment-form-cookies-consent {

				label {
					display: inline-block;
					vertical-align: middle;
					padding-left: 7px;
				}

			}//&.comment-form-cookies-consent

		}//p

		textarea, input {
			border: none;
		}

		input[type="submit"] {
			padding: 10px 20px;
			line-height: 1;
			text-transform: uppercase;
			font-family: $secondary_font;
			font-size: 0.6666em;
			font-weight: 600;
			letter-spacing: 0.5px;
			color: $secondary_color;

			&:hover {
				background: $secondary_color;
				color: #fff;
			}

		}//input[type="submit"]

	}//.comment-form

}//.comments-area

@include media(xs) {

	.comments-area {

		.comment-body {
			padding-left: 20px;
			padding-right: 20px;
		}//.comment-body

		.comment-meta {

			img {
				position: static;
			}//img

			b {
				display: block;
				margin-top: 10px;
			}//b

		}//.comment-meta

		.comment-metadata {
			display: block;
			padding-left: 0;
		}//.comment-metadata

		.children {
			border-left: none;
			padding-left: 0;

			.comment-body::before {
				display: none;
			}
		}//.children

	}//.comments-area

}//media(xs)