@use "@wordpress/base-styles/colors" as *;

/* Styles for backwards compatibility with the legacy `post-comments` block */
.wp-block-post-comments {
	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

	/* utility classes */
	.alignleft {
		float: left;
	}

	.alignright {
		float: right;
	}

	/* end utility classes */
	.navigation {
		&::after {
			content: "";
			display: table;
			clear: both;
		}
	}

	.commentlist {
		clear: both;
		list-style: none;
		margin: 0;
		padding: 0;

		.comment {
			min-height: 2.25em;
			padding-left: 3.25em;

			p {
				font-size: 1em;
				line-height: 1.8;
				margin: 1em 0;
			}
		}

		.children {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}

	.comment-author {
		line-height: 1.5;

		.avatar {
			border-radius: 1.5em;
			display: block;
			float: left;
			height: 2.5em;
			margin-top: 0.5em;
			margin-right: 0.75em;
			width: 2.5em;
		}

		cite {
			font-style: normal;
		}
	}

	.comment-meta {
		font-size: 0.875em;
		line-height: 1.5;

		b {
			font-weight: normal;
		}

		.comment-awaiting-moderation {
			margin-top: 1em;
			margin-bottom: 1em;
			display: block;
		}
	}

	.comment-body .commentmetadata {
		font-size: 0.875em;
	}

	.comment-form-comment,
	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		label {
			display: block;
			margin-bottom: 0.25em;
		}
	}

	.comment-form {

		textarea,
		input:not([type="submit"]):not([type="checkbox"]) {
			display: block;
			box-sizing: border-box;
			width: 100%;
		}
	}

	.comment-form-cookies-consent {
		display: flex;
		gap: 0.25em;

		#wp-comment-cookies-consent {
			margin-top: 0.35em;
		}
	}

	.comment-reply-title {
		margin-bottom: 0;

		:where(small) {
			font-size: var(--wp--preset--font-size--medium, smaller);
			margin-left: 0.5em;
		}
	}

	.reply {
		font-size: 0.875em;
		margin-bottom: 1.4em;
	}

	textarea,
	input:not([type="submit"]) {
		border: 1px solid $gray-600;
		font-size: 1em;
		font-family: inherit;
	}

	textarea,
	input:not([type="submit"]):not([type="checkbox"]) {
		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
	}
}


// Using :where to give this a low specificity so that element styles take precedence.
// Needed for backwards compatibility.
// Styles copied from button block styles.
:where(.wp-block-post-comments input[type="submit"]) {
	border: none;
}

.wp-block-comments {
	box-sizing: border-box;
}