_comments.scss

//--------------------------------------------------------------
// Comments
//--------------------------------------------------------------

//-----------------------------------------
// Comment area scaffolding
//-----------------------------------------
.comments-area {
	border-top: 1px solid $color-border-comment;
	margin: rem(100) 0 rem(151);

	@include media($desktop) {
		margin-left: auto;
		margin-right: auto;
	}

	.comment-reply-title {
		margin-top: rem(47);
	} // .comment-reply-title

	.comments-title {
		font-size: rem(24);
		margin-top: rem(126);
	} // .comments-title

	.comment-notes {
		font-size: em(16);
		margin-bottom: rem(54);
	} // .comment-notes
} // .comments-area


//-----------------------------------------
// Labels
//-----------------------------------------
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {

	label {
		float: left;
		font-size: rem(16);
		text-transform: uppercase;
		width: 100%;
	} // label
} // .comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url


//-----------------------------------------
// The comment form.
//-----------------------------------------
.comment-form {
	@include clearfix;

	width: 100%;

	// Any input (except submit button)
	input:not(.button) {
		clear: both;
		transition: $transition-border;
		width: 100%;

		// Focus + active state.
		&:focus,
		&:active {
			border: 1px solid $color-border-comment-focus;
		} // &:focus, &:active

		@include media($phone) {
			max-width: rem(250);
		}
	} // input:not(.submit)

	// Comment text area.
	textarea {
		max-width: rem(870);
		transition: $transition-border;

		// Focus + active state.
		&:focus,
		&:active {
			border: 1px solid $color-border-comment-focus
		} // &:focus, &:active
	} // textara

	.form-submit {
		margin: 0;
	} // .form-submit

	// Submit button.
	input[type='submit'] {
		width: rem(196);
	} // input[type="submit"]
} // .comment-form


//-----------------------------------------
// Comments
//-----------------------------------------
.comment-list {
	@include list-reset;

	margin: 0;

	// Even comments get nice gray background.
	.even:not(.bypostauthor) > .comment-body {
		background-color: $color-background-even;
	} // .even > .comment-body

	// Each comment body.
	.comment-body {
		padding: rem(36);
	} // .comment-body

	// Comment content.
	.comment-content {
		margin: rem(31) 0 rem(28);
		max-width: rem(936);
	} // .comment-content

	// Comment meta.
	.comment-meta {
		@include clearfix;

		margin: 0 0 rem(14) 0;
	} // .comment-meta

	// The comment author name.
	.comment-author {
		line-height: 1;
	} // .comment-author

	// The date/time.
	.comment-metadata {
		line-height: 1;
		margin-top: rem(5);

		a {
			color: $color-meta-links;
			text-decoration: none;
		} // a

		time {
			font-size: rem(12);
		} // time
	} // .comment-metadata

	// Comments avatar.
	.avatar {
		border-radius: 50%;
		float: left;
		margin: rem(-6) rem(26) 0 0;

		@include media($phone) {
			margin-top: rem(-12);
		}
	} // .avatar

	// By post author.
	.bypostauthor {
		background-color: $color-background-author;
		display: block;
	} // .bypostauthor

	// The reply link/button thingy.
	.comment-reply-link {
		font-weight: 700;
	} // .comment-reply-link

	// If someone replies with code...
	pre,
	code {
		margin: 0;
		padding-top: rem(5);
		width: 100%;
	} // pre, code
} // .comment-list


//-----------------------------------------
// Nested children scaffolding.
//-----------------------------------------
.comment-list {

	// Comment children.
	.children {
		list-style: none;
		margin: rem(40) 0;
		padding-left: rem(20);

		@include media($phone) {
			padding-left: rem(35);
		}

		@include media($tablet-portrait) {
			padding-left: rem(60);
		}

		.depth-4,
		.depth-5,
		.depth-6,
		.depth-7,
		.depth-8,
		.depth-9,
		.depth-10 {

			// Increase line height on mobile for better readability.
			.comment-author {
				line-height: 1.25;

				@include media($phone) {
					line-height: 1;
				}
			} // .comment-author
		} // .depth-x
	} // .children
} // .comment-list


//-----------------------------------------
// Inline reply
//-----------------------------------------
.comment-list {

	.comment-respond {
		background-color: $color-comment-response;
		padding: rem(24) 0;

		@include media($phone) {
			padding-left: rem(36);
			padding-right: rem(36);
		}

		.comment-reply-title {

			// The "cancel reply".
			a {
				display: inline-block;
				text-transform: lowercase;

				&::before {
					content: '(';
				}

				&::after {
					content: ')';
				}
			} // a
		} // .comment-reply-title

		.form-submit {
			margin: 0;

			input[type='submit'] {
				margin-top: rem(5);
			}
		} // .form-submit
	} // .comment-respond
} // .comment-list