/* ========================================================================== *
 * 6. Comments
 * ========================================================================== */

#mpcth_comments {
	padding-top: 4em;
	border-top: 1px solid #eeeeee;
	font-size: 1.083em;

	&:after {
		@extend .after-clear;
	}

	#mpcth_comments_wrap {
		margin-bottom: 4em;

		.pingback {
			margin-bottom: 1em;
		}

		.mpcth-comment {
			position: relative;
			min-height: 62px;
			margin-bottom: 2em;
			@include padding-left(80px); // padding-left: 80px;
		}

		.mpcth-comments-title {
			text-transform: uppercase;
			border-bottom: 1px solid #eeeeee;
			margin-bottom: 1.5em;

			span {
				display: inline-block;
				border-bottom: 1px solid transparent;
				padding-bottom: .847em;
				margin-bottom: -1px;
			}
		}

		.mpcth-comment-header {
			a {
				color: #666666;
			}

			.avatar {
				position: absolute;
				top: 0;
				@include left(0); // left: 0;
				border: 1px solid #eeeeee;
				border-radius: 2px;
			}

			.mpcth-comment-author {
				text-transform: uppercase;
				display: inline-block;
				margin-bottom: 0;
			}

			.comment-reply-link {
				@include margin-left(.25em); // margin-left: .25em;
				padding: 0 .25em;
			}

			.comment-edit-link {
				@include float(right); // float: right;
			}
		}

		.mpcth-comment-content {
			line-height: 1.5em;

			p:first-child {
				margin-top: .5em;
			}
		}

		> ul {
			margin: 0;
			padding: 0;
			list-style: none;

			.children {
				list-style: none;
			}

			ul {
				@include padding-left(2em); // padding-left: 2em;
			}
		}
	}

	#respond {
		&:after {
			@extend .after-clear;
		}

		#reply-title {
			text-transform: uppercase;
			font-size: 1.333em;
			display: inline-block;
			border-bottom: 1px solid transparent;
			padding-bottom: .847em;
			margin-bottom: -1px;
		}

		#mpcth_comment_form {
			padding-top: 1em;
			border-top: 1px solid #eeeeee;

			textarea {
				width: 100%;
				max-width: 100%;
				border: 1px solid #eeeeee;
				border-radius: 2px;
				padding: .75em 1em;

				@extend .box-sizing;
			}

			input[type=text] {
				width: 100%;
				border: 1px solid #eeeeee;
				border-radius: 2px;
				padding: .75em 1em;

				@extend .box-sizing;
			}

			input[type=submit] {
				background: #f3f3f3;
				text-transform: uppercase;
				border: none;
				border: $hover_border;
				border-radius: 2px;
				padding: .5em 1em;
			}

			input,
			textarea {
				color: #666666;

				@extend .transition;

				&.mpcth-input-invalid {
					color: #EC0042;
					border-color: #EC0042;
				}

				&:focus {
					outline: none;
					box-shadow: $hover_shadow;
				}
				&:hover {
					box-shadow: $hover_shadow;
				}
			}

			p {
				position: relative;
			}

			.comment-form-author,
			.comment-form-email,
			.comment-form-url {
				@include float(left); // float: left;
				width: 32.5%;
				margin-bottom: 2em;

				@extend .box-sizing;

				label {
					position: absolute;
					top: 0;
					@include left(1em); // left: 1em;
					z-index: 1;
					font-style: italic;

					@extend .transition;
				}

				input {
					position: relative;
					z-index: 2;

					&:focus + label {
						top: -1.5em;
					}
				}
			}
			.comment-form-author {
				@include padding-right(20px); // padding-right: 20px;
			}
			.comment-form-email {
				width: 35%;
				padding: 0 20px;

				label {
					@include padding-left(20px); // padding-left: 20px;
				}
			}
			.comment-form-url {
				@include padding-left(20px); // padding-left: 20px;

				label {
					@include padding-left(20px); // padding-left: 20px;
				}
			}

			@media #{$screen-medium} {
				.mpcth-responsive & {
					.comment-form-author,
					.comment-form-email,
					.comment-form-url {
						width: 100%;
						@include padding-left(0); // padding-left: 0;
						@include padding-right(0); // padding-right: 0;

						label {
							@include padding-left(0); // padding-left: 0;
						}
					}
				}
			}

			.comment-form-comment {
				clear: both;
				margin-bottom: 2em;

				label {
					position: absolute;
					top: 0;
					@include left(1em); // left: 1em;
					z-index: 1;
					font-style: italic;

					@extend .transition;
				}

				textarea {
					position: relative;
					z-index: 2;

					&:focus + label {
						top: -1.5em;
					}
				}
			}

			.form-submit {
				@include float(right); // float: right;
				width: 32.5%;
				margin-bottom: 2em;
				margin-top: 0;
				@include padding-left(20px); // padding-left: 20px;

				@extend .box-sizing;

				input {
					width: 100%;

					&:hover {
						color: #ffffff;
					}
				}

				@media #{$screen-medium} {
					.mpcth-responsive & {
						width: 50%;
					}
				}
				@media #{$screen-small} {
					.mpcth-responsive & {
						width: 100%;
						@include padding-left(0); // padding-left: 0;
					}
				}
			}

			.comment-notes,
			.logged-in-as,
			.form-allowed-tags {
				display: none;
			}
		}
	}
}