@import "../../../blockbase/sass/blocks/button-mixins";

.wp-block-post-comments {

	line-height: var(--wp--custom--body--typography--line-height);

	.reply a {
		--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
		@include button-border-styles;
		--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
		--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
		--wp--custom--button--border--color: var(--wp--custom--button--hover--color--text);

		& ,
		&:hover,
		&:focus,
		&:active {
			line-height: 1;
		}
		&:not(.has-background):not(.has-text-color) {
			&:hover,
			&:focus,
			&.has-focus {
				--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
				--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
				--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
			}
		}
	}

	form {
		display: grid;
		column-gap: 1em;
		grid-template-rows: auto;
		grid-template-areas:
			"notes notes"
			"author author"
			"email url"
			"comment comment"
			"cookies-consent cookies-consent"
			"form-submit form-submit";

		input:not([type=submit]):not([type=checkbox]),
		textarea {
			border: none;
			background: var(--wp--custom--color--secondary);
			font-size: var(--wp--preset--font-size--normal);
			width: 100%;
		}

		p {
			margin-top: 0;
		}

		.comment-notes {
			grid-area: notes;
		}

		.comment-form-author {
			grid-area: author;
		}

		.comment-form-email {
			grid-area: email;
		}

		.comment-form-url {
			grid-area: url;
		}

		.comment-form-comment {
			grid-area: comment;
		}

		.comment-form-cookies-consent {
			grid-area: cookies-consent;

			input[type="checkbox"] {
				@include hide-accesibly;
				& + label {
					margin-left: 0;
					padding-left: 2em;
					position: relative;
				}
				& + ::before,
				& + ::after {
					box-sizing: border-box;
				}
				& + ::before {
					content: "";
					position: absolute;
					top: 0.2em;
					left: 0;
					width: 16px;
					height: 16px;
					border: 1px solid var(--wp--custom--color--foreground);
				}
				&:checked + ::after {
					content: "\2715";
					width: 12px;
					height: 12px;
					position: absolute;
					top: 4px;
					left: 3px;
					font-size: 14px;
				}
			}

		}

		.form-submit {
			grid-area: form-submit;
		}
	}

	.reply {
		margin-bottom: 30px;
	}

	.commentmetadata {
		margin-bottom: 20px;
	}

	.commentlist {
		margin-bottom: 60px;
	}

	// Target certain links within post comments to use the underline treatment.
	.comment-body > p > a,
	.comment-edit-link {
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}
	}
}