/* 
    Created on : 10.01.2015, 14:28:08
    Author     : DFD
	Styles for : Woocommerce reviews
*/

.woocommerce-page {
	#reviews {
		#comments,
		#review_form_wrapper {
			float: left;
			width: 50%;
		}
		#comments {
			padding-bottom: 0;
			> .woocommerce-Reviews-title {
				position: relative;
				.box-name();
				padding-bottom: 20px;
				margin-bottom: 30px;
				min-height: 40px;
				&:before {
					content: "";
					display: block;
					height: 0;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					border-bottom: 1px dotted @border-color;
				}
			}
			ol.commentlist {
				padding-right: 20px;
				margin: 0;
				width: 100%;
				background: 0;
				list-style: none;
				&:after {
					content: "";
					display: block;
					clear: both;
				}
				&.notes {
					li.note {
						p.meta {
							font-weight: bold;
							margin-bottom: 0;
						}
						.comment-description p:last-child {
							margin-bottom: 0;
						}
					}
				}
				li {
					padding: 0 0 0 44px;
					margin: 0 0 20px;
					position: relative;
					background: 0;
					.comment_container {
						.rel();
						.review-img-wrap {
							.abs();
							top: 10px;
							left: -44px;
							z-index: 1;
							img {
								.block();
								border: 4px solid @background-grey;
							}
						}
						.comment-text {
							.rel();
							min-height: 100px;
							padding: 20px;
							border: 1px solid @border-color;
							.dfd-comment-heading-wrap {
								overflow: hidden;
								line-height: @box-name-font-size;
								padding-left: 50px;
								padding-bottom: 13px;
								margin-bottom: 15px;
								border-bottom: 1px dotted @border-color;
								> .meta {
									float: left;
									margin: 0;
									line-height: inherit;
									.woocommerce-review__author {
										.box-name();
										line-height: inherit;
									}
								}
								.star-rating {
									.rel();
									float: right;
									width: 81px !important;
									height: @box-name-font-size;
									line-height: inherit;
									&:before {
										font-size: @box-name-font-size;
									}
									> span:before {
										font-size: @box-name-font-size;
									}
								}
							}
							.comment-description {
								padding-left: 50px;
							}
						}
					}
					&:last-child {
						margin-bottom: 0;
					}
				}
				> li {
					&:before {
						content: "";
					}
				}
			}
			.add_review {
				&:after {
					content: "";
					display: block;
					clear: both;
				}
				a {
					line-height: 41px;
				}
			}
		}
		#review_form {
			#respond {
				position: static;
				width: auto;
				margin: 0;
				padding: 0;
				background: transparent none;
				border-width: 0;
				&:after {
					content: "";
					display: block;
					clear: both;
				}
				.comment-reply-title {
					display: block;
					min-height: 40px;
				}
				.comment-reply-title,
				> h3 {
					.rel();
					.box-name();
					padding: 0;
					padding-bottom: 20px;
					margin-bottom: 30px;
					&:before {
						content: "";
						.block();
						height: 0;
						.abs();
						bottom: 0;
						left: -25px;
						right: 0;
						border-bottom: 1px dotted @border-color;
					}
					&:after {
						content: "";
						.block();
						width: 0;
						.abs();
						left: -25px;
						top: -20px;
						bottom: 0;
						border-left: 1px dotted @border-color;
					}
				}
				form {
					position: relative;
					overflow: hidden;
					padding: 0;
					margin: 0 -10px;
					> p {
						padding: 0 10px;
						&.comment-form-author,
						&.comment-form-email {
							float: left;
							width: 50%;
							margin-bottom: 25px;
						}
						
					}
					label {
						line-height: 1;
						margin-bottom: 0;
						color: @title-color;
					}
				}
				.comment-form-comment {
					margin-bottom: 20px;
				}
				.comment-form-rating {
					position: absolute;
					bottom: 0;
					right: 0;
					padding: 0 10px;
					width: 50%;
					height: @default-button-line-height;
					line-height: @default-button-line-height;
					margin-bottom: 0;
					label {
						.link-style();
						float: left;
						line-height: inherit;
						padding: 0;
						margin: 0 10px 0 0;
					}
					p {
						.vertical-align();
						float: left;
						margin-bottom: 0;
						a {
							.abs();
						}
					}
				}
				.form-submit {
					float: left;
					width: 50%;
					margin-bottom: 0;
					#submit {
					}
				}
			}
		}
		h3 {
			margin: 0;
		}
		h2 {
			small {
				float: right;
				color: #777;
				font-size: @default-text-font-size;
				line-height: 21px;
				margin: 10px 0 0 0;
				a {
					text-decoration: none;
					color: #777;
				}
			}
		}
		input[type="text"],
		input[type="email"] {
			margin-bottom: 0;
			background: @background-grey;
		}
		#comment {
			margin-bottom: 0;
			background: @background-grey;
		}
	}
}

@media only screen and (max-width: @screen-medium - 1) {
	.woocommerce-page {
		#reviews {
			#comments,
			#review_form_wrapper {
				float: none;
				width: 100%;
			}
			#comments ol.commentlist {
				padding-right: 0;
			}
			#review_form_wrapper {
				margin-top: 40px;
				#review_form {
					padding-left: 0;
					.comment-reply-title {
						padding-top: 20px;
						&:before {
							left: 0;
						}
						&:after {
							left: 0;
							top: 0;
							bottom: auto;
							width: 100%;
							border-left-width: 0 !important;
							border-top: 1px dotted @border-color;
						}
					}
				}
			}
		}
	}
}