Viewing File: /home/maglabs/exclusive/wp-content/themes/homeid/assets/sass/_comment.scss

.comments-area {
	&:not(:first-child) {
		margin-top: 70px;
	}
	.comments-title,
	.comment-reply-title {
		font-size: 22px;
	}

	.comments-title {
		margin-bottom: 35px;
	}

	.comment-reply-title {
		margin-bottom: 25px;
	}
}

.comment-form {
	@extend %clearfix;

	p {
		margin-bottom: 30px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	a {
		color: inherit;

		&:hover {
			color: var(--g5-color-accent);
		}
	}

	textarea {
		width: 100%;
		display: block;
		height: 125px;
	}

	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		input {
			width: 100%;
		}
	}

	.comment-form-email,
	.comment-form-author {
		float: left;
		width: 50%;
	}

	.comment-form-author {
		padding-right: 15px;
	}

	.comment-form-email {
		padding-left: 15px;
	}


	.comment-form-cookies-consent {
		input[type="checkbox"] {
			position: relative;
			top: 2px;
		}

		label {
			display: inline;
			margin: 0 0 0 5px;
		}
	}

	.mc4wp-checkbox-wp-comment-form {
		input[type=checkbox] {
			margin: 0 5px 0 0;
			position: relative;
			top: 2px;
		}
	}

	@include media-xs() {
		.comment-form-email,
		.comment-form-author {
			width: 100%;
			padding: 0;
		}
	}

}

.comments-list-wrap {
	margin-bottom: 60px;
}

.comment-list {
	list-style: none;
	padding: 0 0 $margin_comment_element 0;
	margin-bottom: 0;
	border-bottom: 1px solid var(--g5-color-border);

	li.comment {
		margin-bottom: $margin_comment_element;
	}

	> li.comment:last-child {
		margin-bottom: 0;
	}

	li.comment + li.comment {
		padding-top: $margin_comment_element;
		margin-top: $margin_comment_element;
		border-top: 1px solid var(--g5-color-border);
	}


	li:not(.pingback):not(.trackback) {
		.comment-body {
			position: relative;
			padding-left: 85px;
		}
	}

	li.pingback,
	li.trackback {
		margin-bottom: $margin_comment_element;

		+ .trackback,
		+ .pingback,
		+ .comment {
			margin-top: $margin_comment_element;
			padding-top: $margin_comment_element;
			border-top: 1px solid var(--g5-color-border);
		}

		.comment-body {
			a:not(.comment-edit-link) {
				display: block;
				margin: 5px 0;
				font-size: 16px;
				font-weight: 500;
				color: var(--g5-color-heading);

				&:hover {
					color: var(--g5-color-accent);
				}
			}

			.edit-link {
				margin: 0;
				color: var(--g5-color-heading);

				a {
					color: inherit;

					&:hover {
						color: var(--g5-color-accent);
					}
				}
			}

		}

	}

	.comment-content {
		margin-bottom: 13px;

		h1, h2, h3, h4, h5, h6 {
			margin-top: 2rem;
		}

		h1, h2, h3, h4, h5, h6 {
			&:first-child {
				margin-top: 0;
			}
		}

		p:last-child {
			margin-bottom: 0;
		}
	}

	.comment-meta {
		margin-bottom: 3px;
		@include d-flex();
		@include align-items-center();
		@include flex-wrap();
	}


	.comment-author {
		img {
			position: absolute;
			left: 0;
			top: 0;
			@include border-radius(50%);
		}

		.fn {
			font-size: 16px;
			font-weight: 500;
			color: var(--g5-color-heading);

			> a {
				color: inherit;

				&:hover {
					color: var(--g5-color-accent);
				}
			}

		}

		.says {
			display: none;
		}
	}


	.comment-metadata {
		margin-left: 10px;
		color: var(--g5-color-muted);

		a {
			color: inherit;

			&:hover {
				color: var(--g5-color-heading);
			}
		}
	}

	.reply {
		color: var(--g5-color-heading);

		a {
			color: inherit;

			&:hover {
				color: var(--g5-color-accent);
			}
		}
	}

	.edit-link {
		margin-left: 10px;
	}


	ul.children {
		list-style: none;
		padding-left: 0;
		margin-left: 85px;
		margin-top: $margin_comment_element;
		padding-top: $margin_comment_element;
		border-top: 1px solid var(--g5-color-border);


		ul.children {
			margin-left: 70px;
		}

		.comment-author {
			img {
				width: 45px;
			}

		}

		li:not(.pingback):not(.trackback) {
			.comment-body {
				padding-left: 60px;
			}
		}


	}

	.comment-reply-title {
		margin-top: 50px;

		small {
			a {
				color: inherit;
				font-size: 14px;
				font-weight: 500;

				&:hover {
					color: var(--g5-color-accent);
				}
			}
		}
	}


	@include media-lg {
		ul.children {
			margin-left: 35px !important;
		}
	}

	@include media-xs {
		ul.children {
			margin-left: 25px !important;
		}

		.comment-author img {
			width: 45px;
		}

		li:not(.pingback):not(.trackback) .comment-body {
			padding-left: 60px;
		}

	}


}


.comments-pagination {
	margin-top: 2.5rem;
	text-align: right;
}