/* Comments */

/* Section title */
.wp-block-comments {
	margin-top: var(--wp--preset--spacing--large);
}

/* Comment thread */
.wp-block-comments .wp-block-comment-template,
.wp-block-comments .wp-block-comment-template ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Comment spacing */
.wp-block-comments .wp-block-comment-template li + li {
	margin-top: 24px;
}

/* Nested replies */
.wp-block-comments .wp-block-comment-template li > ol {
	margin-top: 24px;
	padding-left: 56px;
}

/* Avatar gutter */
.wp-block-comments li.comment > .wp-block-columns {
	align-items: flex-start;
	gap: 16px;
}

.wp-block-comments li.comment > .wp-block-columns > .wp-block-column:first-child {
	flex: 0 0 56px;
}

.wp-block-comments .wp-block-avatar img {
	background: var(--wp--preset--color--base-5);
	border-radius: 999px;
}

/* Content column */

/* Comment bubble */
.wp-block-comments .wp-block-comment-content {
	background: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--radius--large);
	color: var(--wp--preset--color--contrast-2);
	margin-top: var(--wp--preset--spacing--small);
	overflow-wrap: break-word;
	padding: var(--wp--preset--spacing--small-medium) var(--wp--preset--spacing--medium);
}

/* Comment meta */
.wp-block-comments .wp-block-comment-author-name {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--regular);
	font-weight: 600;
	overflow-wrap: break-word;
	word-break: break-word;
}

.wp-block-comments .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.wp-block-comments .wp-block-comment-date,
.wp-block-comments .wp-block-comment-date a {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.wp-block-comments .wp-block-comment-date {
	margin-top: var(--wp--preset--spacing--extra-small);
}

/* Author badge */
.wp-block-comments .origin-canvas-author-badge {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--base));
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	display: inline-block;
	font-size: var(--wp--preset--font-size--extra-small);
	font-weight: 600;
	line-height: 1;
	margin-inline-start: var(--wp--preset--spacing--small);
	padding: 4px 10px;
	vertical-align: middle;
}

/* Reply link */
.wp-block-comments .wp-block-comment-reply-link {
	margin-top: var(--wp--preset--spacing--small);
	padding-left: var(--wp--preset--spacing--medium);
}

.wp-block-comments .wp-block-comment-reply-link a {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-comments .wp-block-comment-reply-link a {
		transition: color 120ms ease;
	}
}

.wp-block-comments .wp-block-comment-reply-link a:hover {
	color: var(--wp--preset--color--primary);
}

/* Comment form */
.wp-block-comments .wp-block-post-comments-form {
	background: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--radius--large);
	margin-top: var(--wp--preset--spacing--large);
	padding: var(--wp--preset--spacing--medium);
}

/* Reply title stays at the component weight (D5 exception) */
.wp-block-comments .wp-block-post-comments-form .comment-reply-title {
	font-weight: 600;
}

/* Form type scale */
.wp-block-comments .wp-block-post-comments-form .comment-notes,
.wp-block-comments .wp-block-post-comments-form .comment-notes #email-notes {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
}

/* Field groups */
.wp-block-comments .wp-block-post-comments-form .comment-form > p {
	margin-block: 0;
}

.wp-block-comments .wp-block-post-comments-form .comment-form > p + p {
	margin-top: var(--wp--preset--spacing--medium);
}

.wp-block-comments .wp-block-post-comments-form .comment-form > .form-submit {
	margin-top: var(--wp--preset--spacing--small-medium);
}

/* Field labels */
.wp-block-comments .wp-block-post-comments-form .comment-form label {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin-bottom: var(--wp--preset--spacing--small);
}

/* Inputs */
.wp-block-comments .wp-block-post-comments-form input[type="text"],
.wp-block-comments .wp-block-post-comments-form input[type="email"],
.wp-block-comments .wp-block-post-comments-form input[type="url"],
.wp-block-comments .wp-block-post-comments-form textarea {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast-5);
	border-radius: var(--wp--custom--radius--medium);
	min-height: 44px;
	padding: var(--wp--preset--spacing--small-medium) var(--wp--preset--spacing--medium);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-comments .wp-block-post-comments-form input[type="text"],
	.wp-block-comments .wp-block-post-comments-form input[type="email"],
	.wp-block-comments .wp-block-post-comments-form input[type="url"],
	.wp-block-comments .wp-block-post-comments-form textarea {
		transition: box-shadow 120ms ease, border-color 120ms ease;
	}
}

/* Input hover */
.wp-block-comments .wp-block-post-comments-form input[type="text"]:hover,
.wp-block-comments .wp-block-post-comments-form input[type="email"]:hover,
.wp-block-comments .wp-block-post-comments-form input[type="url"]:hover,
.wp-block-comments .wp-block-post-comments-form textarea:hover {
	border-color: var(--wp--preset--color--contrast-3);
	box-shadow: var(--wp--preset--shadow--small);
}

.wp-block-comments .wp-block-post-comments-form input[type="text"]:focus,
.wp-block-comments .wp-block-post-comments-form input[type="email"]:focus,
.wp-block-comments .wp-block-post-comments-form input[type="url"]:focus,
.wp-block-comments .wp-block-post-comments-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 var(--wp--preset--spacing--extra-small) color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
	outline: none;
}

/* Cookies consent */
.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--small-medium);
}

.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]#wp-comment-cookies-consent {
	appearance: none;
	-webkit-appearance: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast-5);
	border-radius: var(--wp--custom--radius--small);
	cursor: pointer;
	flex: 0 0 auto;
	height: 20px;
	margin: 0;
	position: relative;
	width: 20px;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]#wp-comment-cookies-consent {
		transition: background 120ms ease, border-color 120ms ease;
	}
}

.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]#wp-comment-cookies-consent:checked {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Checkmark */
.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]#wp-comment-cookies-consent:checked::after {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	height: 9px;
	left: 6px;
	position: absolute;
	top: 3px;
	transform: rotate(45deg);
	width: 5px;
}

.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]#wp-comment-cookies-consent:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 var(--wp--preset--spacing--extra-small) color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
	outline: none;
}

/* Consent label */
.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent label {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--regular);
	font-weight: 400;
	margin-bottom: 0;
}

/* Submit */
.wp-block-comments .wp-block-post-comments-form input[type="submit"] {
	background: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-comments .wp-block-post-comments-form input[type="submit"] {
		transition: background 120ms ease;
	}
}

.wp-block-comments .wp-block-post-comments-form input[type="submit"]:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, #000);
}

.wp-block-comments .wp-block-post-comments-form input[type="submit"]:active {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, #000);
}

.wp-block-comments .wp-block-post-comments-form input[type="submit"]:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, #000);
}