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

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

:where(.wp-block-post-comments-form textarea),
:where(.wp-block-post-comments-form 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;
		}
	}
}