/* ======================================================
   <!-- Comments ( Synchronize to WordPress's class name ) -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

/*
 * 1. Comments Wrapper
 * 2. Highlight Author Comments in WordPress
 * 3. Nested Comments
 * 4. Comment Respond
*/



/*
 ---------------------------
 1. Comments Wrapper
 ---------------------------
 */
.comments {

}


/*
 ---------------------------
 2. Highlight Author Comments in WordPress
 ---------------------------
 */
.comment {

	&.bypostauthor {
		background-color: transparent;
	}

	.comment {

		&.bypostauthor {
			background-color: transparent;
		}
		margin-left: 2.625rem;
	}

	p {
		margin-bottom: 1.25rem;
	}

}

/*
 ---------------------------
 3. Nested Comments
 ---------------------------
 */
@media all and (max-width: 768px) {
	.comment .comment {
	    margin-left: 0;
	}
}

.comment-meta {
	margin-bottom: 0.875rem;

	&::after {
		content: '';
		display: block;
		clear: both;
	}
	.comment-avatar {
		width: 45px;
		margin: 0 1.3125rem 0 0;
		display: block;
		float: left;
		img {
			vertical-align: middle;
			width: 100%;
			border-radius: 100%;
		}
	}
	.comment-text {
		display: block;
		float: left;

		h5 {
			margin-bottom: 0;
			padding-bottom: 0;
		}
		em {
			opacity: 0.7;
		}
	}
}

.comment-content {
	border-bottom: 1px solid #E6E6E6;
	margin-bottom: 1.75rem;
	margin-left: calc(2.8125rem + 1.3125rem);
	clear: both;
	padding-bottom: 1.3125rem;
	word-wrap: break-word;
	position: relative;
	border-bottom: 1px solid #E6E6E6;
	margin-bottom: 1.75rem;
	margin-left: calc(2.8125rem + 1.3125rem);
	clear: both;
	padding-bottom: 1.3125rem;
	word-wrap: break-word;

	a {
		&:not(.respond) {
			text-decoration: underline;
		}

		&.respond {
			background: var(--uix-highlight-color1);
			color: #fff;
			position: absolute;
			bottom: 0;
			right: 0;
			font-size: 0.75rem;
			padding: 0.175rem 0.875rem 0;
			text-transform: uppercase;
			border-radius: 2px 2px 0 0;
		}
	}
}


/*
 ---------------------------
 4. Comment Respond
 ---------------------------
 */
.comment-reply-title {
	padding-bottom: 1.75rem;
	font-size: 1.125rem;
	line-height: 1.33333333333;
	text-transform: uppercase;
}