// You can replace variables that are used here with your color palette

.comments-area {
	background-color: $c-gray;
	border: 1px solid $c-silver;
	border-radius: 4px;
	margin-top: 48px;
	padding: 24px 24px 32px;

	.comment {
		padding: 40px 0 50px;
		border-bottom: 1px solid $c-silver;

		.children {
			list-style: none;
			
			li:last-of-type {
				border-bottom: 0;
				padding-bottom: 0;
			}
		}

		&-author {

			.fn {
			  font-size: 20px;
			  font-weight: 600;
			  line-height: normal;
			  color: #434f58;
				text-transform: capitalize;
			}
		}

		&-metadata {
			
			time {
			  font-size: 14px;
			  font-weight: 600;
			  line-height: 1.71;
			  color: #222;
			}

			.edit-link {
				display: none;
			}
		}

		&-notes {
			display: none;
		}

		&-reply-title {
			margin-bottom: 24px;
		}

		&-form {

			label {
				display: block;
			  font-size: 14px;
			  font-weight: bold;
			  line-height: normal;

			  .required {
			  	display: none;
			  }
			}

			textarea {
				width: 100%;
			  min-height: 105px;
			  resize: vertical;
			}

			textarea,
			input {
				border: 1px solid $c-silver;
				border-radius: 4px;
				padding: 16px;

				&:focus {
					outline-color: $c-brand;
				}
			}

			input {
				width: 100%;
				height: 48px;
			  font-size: 16px;
			  font-weight: normal;
			  font-style: normal;
			  font-stretch: normal;
			  line-height: normal;
			  letter-spacing: normal;
			  color: #434f58;
			}

			&-comment {
				margin-bottom: 20px;
			}

			&-url {
				display: none;
			}

			&-author {
				margin-right: 20px;
			}

			&-author,
			&-email {
				display: inline-block;
				width: calc((100% - 25px) / 2)
			}

			.submit {
				@extend .btn;
				@extend .btn--sec;
				width: 240px;
				margin-top: 20px;
				font-size: 16px;
				cursor: pointer;

				&.loadingform {
					background: orange;
				}
				&[disabled] {
					background: #555;
					cursor: not-allowed;
				}
			}
		}
	}

	.comment-reply-link {
		font-size: 14px;
	  font-weight: 600;
	  line-height: 1.43;
	  color: #0073ec;
	}
}

.comments-title {
	border-bottom: 1px solid $c-silver;
	margin-bottom: 0;
	padding-bottom: 22px;
}

.comment-list {
	list-style: none;
	padding-left: 0;
}

.says {
	display: none;
}

.avatar {
	border-radius: 3px;
	margin-right: 24px;
}

.comment-metadata {
	margin-top: -22px;
	margin-left: 84px;
}

.comment-content {
	margin-left: 84px;
	margin-top: 15px;
}

.reply {
	margin-left: 84px;
}



.comment-form-wrapper-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-submit {
	display: flex;
	justify-content: flex-end;
}