@import 'button-mixins';

.wp-block-post-comments {
	label, .comment-meta {
		font-size: var(--wp--custom--form--label--typography--font-size);
	}

	input[type="submit"], 
	.reply a {
		@include button-main-styles;
		@include button-hover-styles;
	}

	.reply {
		margin-block: var(--wp--custom--margin--vertical);

		a {
			display: inline-block;
		}
	}

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

		input:not([type=submit]):not([type=checkbox]),
		textarea {
			background: var(--wp--custom--color--background);
			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
			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;
		}

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

		.comment-form-cookies-consent {
			input[type="checkbox"] {
				@include hide-accesibly;
				margin-left: 0;
				& + label {
					margin-left: 0;
					padding-left: 3em;
					position: relative;
				}
				& + label::before,
				& + label::after {
					box-sizing: border-box;
				}
				& + ::before {
					content: var(--wp--custom--form--checkbox--unchecked--content);
					position: absolute;
					top: var(--wp--custom--form--checkbox--unchecked--position--top);
					left: var(--wp--custom--form--checkbox--unchecked--position--left);
					width: var(--wp--custom--form--checkbox--unchecked--sizing--width);
					height: var(--wp--custom--form--checkbox--unchecked--sizing--height);
					border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
				}
				&:checked + ::after {
					content: var(--wp--custom--form--checkbox--checked--content);;
					position: absolute;
					top: var(--wp--custom--form--checkbox--checked--position--top);
					left: var(--wp--custom--form--checkbox--checked--position--left);
					width: var(--wp--custom--form--checkbox--checked--sizing--width);
					height: var(--wp--custom--form--checkbox--checked--sizing--height);
					font-size: var(--wp--custom--form--checkbox--checked--font-size);
				}
			}
		}
	}

	.comment-reply-title {
		small {
			float: right;
			font-size: 14px;
		}
	}

	.commentlist {
		.comment {
			p {
				font-size: var(--wp--custom--post-comment--typography--font-size);
				line-height: var(--wp--custom--post-comment--typography--line-height);
			}
		}
	}

	.commentmetadata {
		margin-left: 0;
	}

	.comment-awaiting-moderation {
		display: inline-block;
		font-size: var(--wp--preset--font-size--small);
		margin-bottom: var(--wp--custom--margin--baseline);
	}

}