/* 
    Created on : 16.01.2015, 14:18:23
    Author     : DFD
	Styles for : Single post comments
*/
/* Comments */
#comments {
	padding-bottom: 25px;
	
	h5 {
		font-size: @block-title-font-size;
		letter-spacing: 0;
		padding-bottom: 25px;
	}
	.commentlist {
		margin: 0;
		
		.comment {
			>.clearfix {
				padding: 30px 0;
				background: @main-site-dark-color;
				border-bottom: 1px dotted @border-color;
				/* Arrow at author's image */
				.avatar-box {
					i {
						font-size: 22px;
						.abs();
						right: 100%;
						top: 50%;
						.block();
						line-height: 1;
						margin-top: -.5em;
						margin-right: 10px;
						color: @border-color;
					}
				}
				footer {
					margin-top: 10px;
					margin-left: 80px;
				}
			}
			&.depth-1 {
				>.clearfix .avatar-box {
					i,
					&:before,
					&:after {
						.hide();
					}
				}
			}
		}
		li {
			.rel();
			list-style: none;
			padding-bottom: 20px;
			
			&:last-child {
				padding-bottom: 0;
			}
			
			ul.children {
				margin-top: 10px;
				margin-left: 0;
				padding-left: 100px;
				background: @main-site-dark-color;
				
				li {
					.clearfix {
						background: @main-site-dark-color;
					}
				}
			}
			.ovh {
				margin-left: 100px;
			}
			.avatar-box {
				.rel();
				float: left;
				overflow: hidden;
				.rounded(50%);
				
				img {
					vertical-align: top;
				}
			}
			
			.comment-author {
				//.clearfix();
				height: 1em;
				line-height: 1;
				margin-left: 100px;
				margin-bottom: 15px;
				
				.left {
					line-height: inherit;
					
					> * {
						line-height: inherit;
					}
				}
				
				.author {
					float: left;
					font-size: @box-name-font-size - 2;
					text-transform: uppercase;
					line-height: inherit;
					padding-right: 10px;
					margin-bottom: 0;
					color: @title-color;
					
					a {
						.block();
						font-size: inherit;
						font-style: inherit;
						font-weight: inherit;
						padding-bottom: 0;
					}
				}
				.date {
					.rel();
					float: left;
					line-height: inherit;
					color: @news-widgets-entry-meta-color;
				}
			}
			.reply {
				@size: 30px;
				float: right;
				height: 1em;
				line-height: 1;
				.dop-link {
					.rel();
					.inline-block();
					padding-right: 10px;
					color: @subtitle-color;

					a {
						height: 1em;
						line-height: 1;
						color: inherit;
						.slide-up {
							color: transparent;
							text-shadow: 0 0 @subtitle-color, 0 @box-name-font-size + 2 @title-color;
						}
						&:hover {
							.slide-up {
								color: transparent;
								text-shadow: 0 -(@box-name-font-size + 2) @subtitle-color, 0 0 @title-color;
							}
						}
					}
				}

				a {
					.rel();
					.inline-block();
					.box-name();
					font-size: @box-name-font-size - 2;
					text-transform: uppercase;
					line-height: 1;
					padding-bottom: 0;
					color: @main-site-light-color;
					overflow: hidden;
					.slide-up {
						.transition(text-shadow .3s ease-in-out);
					}
					&.comment-reply-link {
						.slide-up {
							color: transparent;
							text-shadow: 0 0 @main-site-light-color, 0 @box-name-font-size + 2 @title-color;
						}
						&:hover {
							.slide-up {
								color: transparent;
								text-shadow: 0 -(@box-name-font-size + 2) @main-site-light-color, 0 0 @title-color;
							}
						}
					}
				}
			}
			.comment-content {
				.rel();
				line-height: 1.8;
				 p {
					line-height: inherit;
					margin: 0;
				 }
			}
		}
	}
}
/* Respond */
#respond {
	padding-bottom: 30px;
    
	> div.block-title {
		line-height: 1;
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px dotted @border-color;
	}
	.cancel-comment-reply {
		margin-bottom: 0;
		> a {
			.link-style();
		}
	}
	a {
		.link-style();
		&.box-name {
			.link-decoration();
		}
	}
	form {
		label {
			margin-bottom: 10px;
			color: @block-title-color;
		}
		
		input[type="text"],
		input[type="email"],
		input[type="url"],
		textarea {
			.rounded(2px);
		}
		
		p {
			margin-bottom: 10px;
			div.box-name {
				padding-bottom: 0;
				color: @second-site-light-color;
			}
		}
		
		.button {
			padding: 0 35px;
			border-width: 0;
		}
	}
}
#layout.single-post,
#layout.single-folio.folio_inside_2 {
	#comments {
		padding: 60px 10px 0;
		div.block-title {
			padding-bottom: 10px;
			margin-bottom: 30px;
			border-bottom: 1px dotted @border-color;
		}
		.commentlist {
			padding-left: 44px;
			li ul.children {
				margin-top: 35px;
			}
			.comment {

				>.clearfix {
					@h: 40px;
					padding: 0;
					border: 1px solid @border-color;
					.rounded(2px);
					.avatar-box {
						margin-left: -44px;
						margin-top: 15px;
						margin-bottom: 15px;
						border: 4px solid @border-color;
						.rounded(0);
						img {
							.block();
						}
					}
					header.comment-author {
						overflow: hidden;
						height: auto;
						line-height: @h;
						margin-bottom: 0;
						padding-left: 30px;
						margin-left: 40px;
						border-bottom: 1px dotted @border-color;
						.author.box-name {
							.box-name();
							//height: inherit;
							line-height: inherit;
							a {
								padding: 0;
							}
						}
						.date.subtitle {
							//height: inherit;
							line-height: inherit;

						}
						.reply {
							overflow: hidden;
							height: inherit;
							line-height: inherit;
							.dop-link {
								.rel();
								float: left;
								.block();
								min-width: 100px;
								max-width: 100px;
								height: inherit;
								line-height: inherit;
								padding-left: 50px;
								padding-right: 0;
								overflow: hidden;
								&:before {
									content: "\e964";
									font-family: "icomoon";
									.block();
									height: 1em;
									line-height: 1;
									.abs();
									top: 50%;
									left: 20px;
									margin-top: -.5em;
									color: @link-color;
								}
								a {
									overflow: visible;
									span {
										.rel();
										.link-decoration();
									}
								}
							}
							.comment-reply-link {
								.rel();
								float: left;
								.block();
								min-width: 140px;
								max-width: 140px;
								height: inherit;
								line-height: inherit;
								padding-left: 40px;
								padding-right: 25px;
								white-space: nowrap;
								&:before {
									content: "\ec22";
									font-family: "icomoon";
									.block();
									height: 1em;
									line-height: 1;
									.abs();
									top: 50%;
									left: 20px;
									margin-top: -.5em;
									color: @link-color;
								}
								span {
									.rel();
									.link-decoration();
								}
							}
							a {
								.link-style();
							}
						}
					}
					.ovh {
						margin-left: 40px;
						padding: 15px 30px;
					}
					footer {
						margin: 0;
					}
				}
			}
		}
	}
	#respond {
		padding: 60px 10px 0;
		#commentform {
			margin: 0 -10px;
			label {
				color: @default-text-color;
			}
			.input-wrap {
				width: 33.333%;
				float: left;
				padding: 0 10px;
			}
			.textarea-wrap {
				padding: 0 10px;
			}
			p {
				&.wpgdprc-checkbox,
				&.text-left {
					padding: 0 10px;
				}
			}
			input,
			textarea {
				margin-bottom: 10px;
				background: @background-grey;
				.rounded(2px);
			}
		}
	}
}
#layout.single-folio.folio_inside_1 {
	#respond {
		padding-top: 60px;
	}
}