$link-color: #FF5800;
$comments-input-padding: 10px;
$comments-submit-padding: 6px 18px;

.comments-area {
	padding: 0 40px;

	@media (max-width: $breakpoint-small) {
		padding: 0 20px;
	}

	.avatar,
	.says {
		display: none;
	}

	.comment-form {
		label {
			display: block;
		}
	}

	.comment-author {
		display: inline-block;

		.url {
			color: $link-color;
		}
	}

	.comment-metadata {
		display: inline-block;

		a {
			color: #ADADAD;
			margin: 0 5px;
		}
	}

	.comment-content {
		a {
			color: $link-color;
		}
	}

	.reply {
		margin-top: 10px;

		.comment-reply-link {
			color: $link-color;
		}
	}

	.comment-body {
		margin: 20px 0;

		.comment-edit-link {
			color: $link-color;
		}
	}

	.children {
		margin-left: 40px;
		position: relative;

		&:before {
			content: '';
			border-top: 1px solid #95989A;
			width: 25px;
			height: 1px;
			position: absolute;
			left: 0;
			top: 15px;
			margin-left: -40px;
			display: block;
		}
	}

	ul,
	ol {
		li {
			list-style: none;

			&:before {
				display: none;
			}
		}
	}
}

.comment-respond {

	textarea,
	input {
		padding: $comments-input-padding;
		border-radius: 6px;
		border: 1px solid #E5E5E5;
		background: #FAFAFA;

		&:focus,
		&:active {
			outline: none;
			border: 1px solid #bbbbbb;
		}

		@media (max-width: $breakpoint-mobile) {
			width: 100%;
		}
	}

	.comment-reply-title {
		margin-bottom: 20px;
	}

	.submit {
		padding: $comments-submit-padding;
		background: $link-color;
		color: #fff;
		font-weight: bold;
		transition: .3s ease;

		&:hover {
			background: #FFF;
			color: #3a3a3a;
		}
	}
}

.comment-form-comment {
	textarea {
		max-width: 450px;
		width: 100%;
	}
}