/*--------------------------------------------------------------
15.0 Comments & Respond Form
--------------------------------------------------------------*/

/* Comments Form */
.comments-area {
	padding-top: 20px;
	border-style: dashed;
	border-width: 1px 0 0 0;
	border-color: #e6e6e6;
	
	.comments-title {
		font-size: 26px;
	}


	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		float: left;
		width: 33.333%;
		margin-bottom: 40px;

		input {
			background-color: #f5f5f5;
		}
	}

	.comment-form-comment {
		clear: both;

		textarea {
			background-color: #f5f5f5;
		}
	}

	.comment-list {
		padding-left: 0;
		margin: 30px 0;
		padding-bottom: 20px;
		border-bottom: 1px dashed #e6e6e6;

		ul {

			&.children {
				padding-left: 0;
				margin-left: 110px;

				@media(max-width: $screen-md) {
					margin-left: 50px;
				}
			}
		}
		
		li {
			list-style: none;
			margin-bottom: 40px;

			.comment-inner {
				position: relative;
				padding: 30px 40px;
				margin-left: 100px;
				background-color: #f5f5f5;

				@media(max-width: $screen-md) {
					margin-left: 75px;
					padding: 20px 30px;
				}

				&::after {
					position: absolute;
					content: "";
					top: 27px;
					left: -20px;
					display: block;
					border: 10px solid transparent;
					border-right-color: #f5f5f5;
				}
			}

			.comment-header {
				margin-bottom: 20px;

				.author-link {
					display: inline-block;
					margin-right: 10px;
					font-size: 18px;
					color: $dark-color;
					font-weight: bold;
				}

				.comment-time {
					margin-top: 7px;
					font-size: 13px;
					color: $text-color;

					@media(min-width: $screen-md) {
						float: right;
					}
				}
			}

			.comment-meta {

				a {
					color: $text-color;
					font-weight: bold;
					text-decoration: none;
				}
			}
		}

		.comment-edit-link {
			margin: 7px 10px 0 0;
			color: $text-color;
			font-size: 13px;

			@media(min-width: $screen-md) {
				float: right;
			}
		}

		#cancel-comment-reply-link {
			padding: 10px;
			margin: 10px 0 0 10px;
			font-weight: 700;
			color: #aaaaaa;
			font-size: 13px;
			background: #e6e6e6;
			border-radius: 2px;
		}

		.comment-reply-title {
			font-size: 26px;
		}

		.blog-comment {
			margin-bottom: 30px;
		}

		.comment-avatar {
			float: left;

			img {
				width: auto;
				height: auto;
				display: block;

				@media( max-width: $screen-md) {
					width: 50px;
					height: auto;
				}
			}
		}

		.comment-actions {

			a {
				display: inline-block;
				margin-top: 10px;
				margin-right: 10px;
				text-transform: uppercase;
				font-size: 14px;
				font-weight: bold;
			}
		}
	}
}

/* Respond Form */
.comment-respond {

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

	.comment-form {

		label {
			display: block;
			margin-bottom: 5px;
			font-weight: bold;
		}
	
		input {
			padding: 12px 10px;
			border: 1px solid #e6e6e6;
			border-radius: 1px;

			&:focus {
				border-color: $primary-color;
			}
		}

		textarea {
			padding: 15px;
			margin-bottom: 15px;
		}

		.form-submit {

			.submit {
				padding: 18px 22px;
				text-transform: uppercase;
				border: none;
			}
		}

		.form-allowed-tags {
			margin: 20px 0;

			code {
				font-size: 12px;
			}
		}

	}
}