@import "@{parenturl}/wp-less/mixin.less";

#respond {
	.comment-reply-title {
		margin-bottom:.5em;
	}
}

#comments {
	border-top:1px solid;
	padding-top:25px;	

	#comments-list > ul {
		> li:first-child {
			border-top: none;
			padding-top:0;
		}	
		> li:last-child {
			border-bottom: 1px solid #999;
		}	
	}

	ul {
		padding-left:0;
		list-style-type: none;

		&.children {
			margin-left:40px;
		}
		
		li {
			border-top: 1px solid #999;
			padding-top:25px;
		}

		.comment {
			
			.comment-details {
				padding-bottom:25px;
			}
			
			header.comment-meta {
				.vertAlign;
				-moz-justify-content: flex-start;
				-webkit-justify-content: flex-start;
				margin-bottom:20px;
				
				.comment-author {
					margin-right:10px;
					line-height:0;
					img {
						border-radius: 50%;
					}
				}
				.comment-edit-link {
					font-size:.75em;
				}
			}

			.comment-body {
				margin-bottom:20px;

				p:last-of-type {
					margin-bottom:0;
				}
				p:first-of-type {
					clear:left;
				}
			}
			
			.comment-reply {
				.comment-reply-link {
					&:before {
						content:'████';
						.mask( url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 450'%3e%3cpath d='M503.7,291.2l-176,151.9C312.3,456.5,288,445.7,288,425V344.9C127.4,343.1,0,310.9,0,158.7,0,97.2,39.6,36.4,83.3,4.5,97-5.4,116.4,7.1,111.4,23.2,66.1,168.2,132.9,206.7,288,208.9V121c0-20.7,24.3-31.5,39.7-18.2l176,152A24.1,24.1,0,0,1,503.7,291.2Z'/%3e%3c/svg%3e ") no-repeat center );
						display:inline-block;
						width:1em;
						margin-right:.25em;
						letter-spacing:-1px;
					}
				}
			}
		}
	}
	#cancel-comment-reply-link {
		font-size:.75em;
	}
}

.comment-form {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap:10px 25px;

	> * {
		margin:0;
		grid-column: 1 / span 3;
	}
	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		grid-column: span 1;
	}
	
	input[type="checkbox"] {
		display:inline-block;
		vertical-align:middle;
		margin-right:.5em;
		+ label {
			display:inline-block;
			vertical-align:middle;
		}
	}
	
	.form-submit {
		.submit {
			background: rgba(255,255,255,0.9);
			border: 1px solid #ccc;
			cursor: pointer;	
		}
	}
}