// Allow these default styles to be overridden by global styles.
:where(.wp-block-post-comments-form) {
	textarea,
	input:not([type="submit"]) {
		border: 1px solid $gray-600;
		font-size: 1em;
		font-family: inherit;
	}

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

.wp-block-post-comments-form {
	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

	&[style*="font-weight"] :where(.comment-reply-title) {
		font-weight: inherit;
	}
	&[style*="font-family"] :where(.comment-reply-title) {
		font-family: inherit;
	}
	&[class*="-font-size"] :where(.comment-reply-title),
	&[style*="font-size"] :where(.comment-reply-title) {
		font-size: inherit;
	}
	&[style*="line-height"] :where(.comment-reply-title) {
		line-height: inherit;
	}
	&[style*="font-style"] :where(.comment-reply-title) {
		font-style: inherit;
	}
	&[style*="letter-spacing"] :where(.comment-reply-title) {
		letter-spacing: inherit;
	}

	// Styles copied from button block styles.
	:where(input[type="submit"]) {
		box-shadow: none;
		cursor: pointer;
		display: inline-block;
		text-align: center;
		overflow-wrap: break-word;
	}

	.comment-form {
		textarea,
		// Make sure to not set display block on hidden input fields, to prevent
		// the Safari bug experienced in https://github.com/WordPress/gutenberg/issues/50830
		input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]) {
			display: block;
			box-sizing: border-box;
			width: 100%;
		}
	}

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

	.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;
		}
	}

	// Override the 100% width derived from the Button block
	input[type="submit"] {
		width: auto;
	}
}