/**
 * 6.0 - Wordpress part
 *  6.4 - comments
 */

//----------------------------------------------------------------------------//
// NOO Framework / Less / Wordpress / Comments
//
// This file is less styling for Comments
//
//----------------------------------------------------------------------------//


// Basic Structure
//----------------------------------------------------------

// Comments Area
.comments-area { 
	background: #fff;
	margin-top: @grid-gutter-width;
	padding: @grid-gutter-width 0;
	> h2 {
		font-size: @font-size-base;
		font-weight: 600;
	}

	> .comment-respond{
		.comment-form-fields{
			&:extend(.clearfix all);
			.comment-form-input {
				// width: 100%;
				float: left;
			}
			.comment-form-textarea{
				
				label {
					display: none;
				}
				textarea {
					// margin-bottom: 0;
					// margin-top: 24px;
				}
			}

			@media (max-width:767px) {
				.comment-form-input,
				.comment-form-textarea{
					float: none;
					// width: 100%;
					padding: 0;
				}
				.comment-form-textarea{
					label {
						display: block;
					}
					textarea {
						margin-bottom: 20px;
						margin-top: 0px;
					}
				}
			}
			&.comment-form-in-as{
				.comment-form-textarea{
					float: none;
					// width: 100%;
					padding: 0;
					label {
						display: block;
					}
					textarea {
						margin-bottom: 20px;
						margin-top: 0px;
					}
				}
			}
		}
	}

	a:hover,
	a:focus {
		text-decoration: none;
	}
	@media (max-width: @screen-sm-min) {
		padding: (@grid-gutter-width / 2);
	}
}

// Comment Title

h2.comments-title {
	// text-transform: uppercase;
	font-size: 1.3em;
	span {
		color: @brand-primary;
	}
}

// Comments List
//----------------------------------------------------------
.comments-list,
.comments-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

// Child comments.
.comments-list .children {
	@media (min-width: @grid-float-breakpoint) {
	    // border-left: 1px solid @comment-boder-color;
	    padding-left: 50px;
		margin-left: 35px;
	    position: relative;
		.comment {
			position: relative;
		}
	    
	}
}

// Comment wrapper ( Li )
li.comment {
	margin: 0;
	padding: 0;
}

li.comment.odd {}

li.comment.even {}

li.comment.depth-1 {}

li.comment.depth-2 {}

li.comment.depth-3 {}


// Gravatar image.
.comment-img {
	float: left;
	margin-top: 4px;
	margin-left: 4px;
	img {
		-webkit-box-shadow: 0 0 0 4px #ebeeef;
		box-shadow: 0 0 0 4px #ebeeef;
		border-radius: 50%;
		z-index: 2;
		position: relative;
	}
}


// Comment content
.comment-wrap{
	position: relative;
	margin: 0 0 10px 0px;
	padding: 20px 0 10px 0;
	border: 0;
	@media (max-width: @grid-float-breakpoint-max) {
		padding: 7%;
	}
	@media (max-width: @screen-xs-max) {
		padding: 0;
	}
}
.comment-block {
	padding: 0;
	margin: 0 0 0 90px;
	@media (max-width: @screen-xs-max) {
		margin: @grid-gutter-width/2 0;
	}
	&:after {
		position: absolute;
		content: "";
		bottom: -10px;
		background: @border-color-base;
		height: 1px;
		width: 550px;
		float: right;
		right: 0;
		left: auto;
	}
}

.comment-header {
	padding-bottom: @padding-base-vertical;
	display: inline-flex;
	span.pull-right{
		margin-top: 6px;
	}
	@media (max-width: @screen-xs-max) {
		padding: 10px 0;
	}
}

.comment-content {
	position: relative;
}

.comment-author {
	margin-right: 10px;
	a {
		color: @text-color;
		font-weight: bold;

		&:hover {
			color: @link-hover-color;
		}
	}
}

.ispostauthor {
	background: none repeat scroll 0 0 #000;
    color: #FFFFFF;
    padding: 0px 5px;
    margin-left: 10px;
    border-radius:@border-radius-base;
}

.comment-meta {
	position: relative;
	margin: 0;
	padding-left: 15px;
	padding-right: 15px;
	color: #b0b0b0;
	time:before {
		content: ".";
		position: absolute;
		font-size: 30px;
		top: -20px;
		left: 0;
	}
	@media (max-width: @screen-xs-max) { 
		padding-left: 10px;
		padding-right: 10px;
	}
}

.comment-pending {
	padding: @padding-base-vertical @padding-base-horizontal;
	text-align: center;
	color: @link-color;
	background-color: @gray-lighter;
	border-radius: @border-radius-base;
}


// Comment Reply
//----------------------------------------------------------
.comment-reply-link{
	border-radius:@border-radius-base;
	color: @gray-light;
	padding: 5px 0;
	font-style: italic;
	padding-left: @padding-base-vertical;
	&:hover{
		color: @brand-primary;
	}
}
#respond {
	margin-bottom: 50px;
	margin-top: 50px;

	.required {
		position: relative;
		color: @link-color;
	}
}
.comment-reply-title{
	font-weight: bold;
	font-size: @font-size-base + 4;
	font-family: @headings-font-family;
	padding-bottom: (@grid-gutter-width /2);
	span {
	}
	small {
		font-size: @font-size-base;
	}
}

#commentform {
	margin-bottom: 0;
}

.comment-notes{
	.clearfix();
}
.comment-notes,
.logged-in-as {
	margin-bottom: 20px;
	// font-size: @font-size-small;
}

.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-rating,
.comment-form-comment {
	margin: 0;
	label {
		font-weight: 300;
		.required {
		}
	}
}


.comment-form-author,
.comment-form-email,
.comment-form-url {
	input {
		margin-bottom: 20px;
		font-size: @font-size-base;
	 	background: transparent;
	    border-radius:@border-radius-small;
	    // .box-shadow(0 -2px 0 #E6E6E6);
	    padding: 8px 20px;
	    width: 100%;
	    border: 1px solid @comment-boder-color;
	    color: #b0b0b0;
	    font-style: italic;
	    font-weight: 300;
	    -webkit-font-smoothing: antialiased;
	    font-smoothing: antialiased;
	}
}

.comment-form-comment {
	textarea {
		font-size: @font-size-base;
		background: transparent;
	    border-radius:@border-radius-small;
	    // .box-shadow(0 -2px 0 #E6E6E6);
	    margin-bottom: 20px;
	    margin-top: 0px;
	    height: 180px;
	    padding: 20px;
	    resize: none;
	    width: 100%;	    
	    border: 1px solid @comment-boder-color;
	}
}

.form-submit {
	margin: 0;
	input[type="submit"] {
		.btn();
		.btn-primary();
		padding: 10px (1.5*@grid-gutter-width);
		float: left;
		font-size: @font-size-base + 2;
		&:hover,
		&:focus {
			background:@link-color;
			color: #ffffff;
			border-color: @link-color;
		}
	}
}