/*---------------------------------------------------------
 8. Comments (_comments.scss)
-------------------------------------------------------- */
.comment {
	list-style: none; //reset
	@include rem('margin', 50px 0);
	&:first-of-type {
		margin-top: 0; //reset
	}

	.children {
		@include rem('margin-top', 70px);
		@include rem('margin-left', 100px);
		@include media(max-width 480px) {
			@include rem('margin-left', 50px);
		}
	}

	.divider {
		display: inline-block;
		padding: 0 10px 0 6px;
	}
}

.comments-area {
	@include rem('margin-bottom', 50px);
	@include rem('margin-top', 50px);
}

.comment-author {
	font-weight: bold;
	color: #111112;
	@include rem('font-size', 23px);
	@include rem('padding-right', 15px);
}

.comments-title {
	display: inline-block;
	vertical-align: middle;
	line-height: 50px;
}

#cancel-comment-reply-link {
	@include rem('font-size', 15px);
}

.comment-form-actions {
	@include media($grid-breakpoint) {
		display: inline-block;
		float: right;
		vertical-align: middle;
	}
	@include media(max-width $grid-breakpoint - 1) {
		margin-top: 20px;
		button {
			width: 100%;
		}
	}
}

.comment-meta {
	@include rem('margin-bottom', 20px);

	a {
		color: inherit;
		border: 0;
	}
}

.comment-form-email {
	margin-left: 3%;
	@include media(max-width $one) {
		margin-left: 0;
	}
}

@include media($grid-breakpoint) {
	.comment-form-email,
	.comment-form-author {
		width: 48.4%;
		display: inline-block;
		vertical-align: top;
		margin-right: -.25em;
	}
}

.comment-form {
	background: #f6f6f6;
	padding: 35px 35px 0 35px;

	input:not([type=submit]), textarea {
		width: 100%;
	}

	textarea {
		height: 150px;
		resize: none;
		line-height: 1.6;
	}

	.comment-notes {
		font-size: 0.9em;
		margin: 0 0 20px 0;
	}

	> p {
		@include rem('margin-top', $base*2);
	}

	.comment-form-comment {
		@include rem('margin-top', 10px);
	}

	.logged-in-as {
		@include rem('margin-bottom', 30px);
		margin-top: 0;
	}

	.submit:focus {
		background: #000;
	}
}

.comment-list {
	@extend %cf;
	@include rem('margin-top', $base*2);
}

.comment-metadata {
	@include media(max-width 480px) {
		display: block;
	}
}

.comments-title,
.comment-reply-title {
	@include rem('font-size', 25px);
	color: #2C2C2C;
}

#reply-title {
	background: #f6f6f6;
	padding: 60px 35px 0 35px;
}

.blog-textarea {
	resize: none;
}

.form-submit {
	background: #fff;
	@include rem('padding-top', 40px);
	margin-left: -35px;
	margin-right: -35px;
}

.comment-avatar {
	overflow: hidden;
	float: left;
	margin-right: 20px;
	img {
		border-radius: 50%;
		max-width: 84px;
	}
}

.show-avatars {
	.comment-content {
		padding-left: 104px;
	}
}

/*---------------------------------------------------------
 Pingbacks / trackbacks (_comments.scss)
-------------------------------------------------------- */
.pingback,
.trackback {
	padding-top: 0; //reset
	list-style: none; //reset
}
/*---------------------------------------------------------
 Respond form (_comments.scss)
-------------------------------------------------------- */
.respond-type {
	width: 100%;
}
.comment-guidelines {
	display: block;
	color: $detail-lightgray;
}
.respond-body {
	margin: 0; //reset
	border-bottom: $rule;
	@include rem('padding-bottom', $base*2);
}
#respond {
	.form-submit,
	input[type="submit"] {
		margin-bottom: 0; //reset
	}
	input[type="submit"] {
		@include media(max-width $one) {
			width: 100%;
		}
	}
	li + & {
		@include rem('margin-bottom', $base*3);
	}
}

.comment-respond {
	@include rem('margin-top', $base*2);
	@include media(max-width $one) {
		margin-left: -20px;
		margin-right: -20px;
	}
}

.toggle-comments {
	&:after {
		content: "\f106";
		margin-left: 5px;
		font: normal 900 normal 14px/1 "Font Awesome 5 Free";
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	&.is-visible:after { content: '\f106'; }
	&.is-collapsed:after { content: '\f107'; }
}

.toggle-comments {
	.hide-label {
		display: none;
	}
}

.is-visible {
	.hide-label { display: inline-block; }
	.show-label { display: none; }
}

.comments-visible, .is-collapsed {
	.show-label { display: inline-block; }
	.hide-label { display: none; }
}

.comments-wrap {
	width: 100%;
	display: inline-block;

	&.is-collapsed {
		display: none;
	}
}
