@import "../../main/variables";

.nv-comment-content {
	margin-bottom: 0 !important;

	> *:last-child {
		margin-bottom: 0;
	}
}

#comments {

	li.comment {
		border-bottom: 2px solid;
		padding-bottom: $spacing-xl;
		margin-bottom: $spacing-xl;
	}

	article {
		display: flex;
		gap: 20px;
	}

	.nv-comment-avatar {
		flex-shrink: 0;
	}

	.avatar {
		border-radius: 100%;
	}

	input:not([type="submit"]):not([type="checkbox"]) {
		width: 100%;
	}

	ol {
		list-style: none;
	}

	textarea {
		max-width: 100%;
		width: 100%;
		display: block;
	}

	.comment-reply-title {
		margin-bottom: $spacing-sm;

		small {
			float: right;
		}
	}
}

.nv-comment-header {
	display: flex;
	align-items: center;
	margin-bottom: $spacing-lg;

	.vcard {
		display: grid;

		a {
			color: var(--color, var(--nv-text-color));
		}

		.author {
			font-weight: 700;
		}

		time {
			font-size: $text-sm;
			opacity: 0.7;
		}
	}

	.edit-reply {
		font-size: $text-sm;
		font-weight: 700;
		text-transform: uppercase;
		margin-left: auto;
	}
}

.comments-title {
	margin-bottom: $spacing-xxl;

	@extend %nv-has-h4-typography;
}

.comment-content {
	flex: 1;
}

.comment-form {
	display: grid;
	grid-column-gap: $spacing-sm;
	grid-row-gap: $spacing-xs;

	> p:not(.comment-notes) {
		margin-bottom: 0;
	}

	label {
		display: inline-block;
	}
}

.nv-comments-list {
	margin-bottom: $spacing-xxl;

	.children {
		padding-left: $spacing-sm;
	}
}

@mixin comments--tablet() {

	#comments {

		.comment-form {
			grid-template-columns: repeat(3, 1fr);

			> *:not(.comment-form-author):not(.comment-form-url):not(.comment-form-email) {
				grid-column: 1/-1;
			}
		}
	}
}
