.wpplatform-comments {
  --comments-heading: var(--school-heading);
  --comments-text: var(--school-text);
  --comments-primary: var(--school-primary);
  --comments-secondary: var(--school-secondary);
  --comments-surface: var(--school-surface);
  --comments-surface-alt: var(--school-surface-alt);
  --comments-border: var(--school-card-border-color);
  --comments-radius: var(--school-card-radius);
  --comments-radius-lg: var(--school-radius-large);
  --comments-shadow: var(--school-card-shadow);
  max-width: var(--school-layout-article);
  margin-inline: auto;
  padding: var(--school-space-5);
  border: var(--school-card-border-width) solid var(--comments-border);
  border-radius: var(--comments-radius-lg);
  background: var(--school-background);
  box-shadow: var(--comments-shadow);
}

.wpplatform-comments .wpplatform-comments__title {
  margin: 0 0 var(--school-space-4);
  color: var(--comments-heading);
  font-size: var(--wp--preset--font-size--heading-3);
}

.wpplatform-comments .wpplatform-comment {
  display: flex;
  gap: var(--school-space-3);
  align-items: flex-start;
  margin: 0 0 var(--school-space-3);
  padding: var(--school-space-3);
  border-radius: var(--comments-radius);
  background: var(--comments-surface);
}

.wpplatform-comments .bypostauthor > .wpplatform-comment,
.wpplatform-comments .wpplatform-comment.bypostauthor {
  border: var(--school-card-border-width) solid var(--comments-secondary);
  background: color-mix(in srgb, var(--comments-secondary) 10%, var(--comments-surface));
}

.wpplatform-comments .wpplatform-comment__avatar img {
  border-radius: var(--school-radius-circle);
}

.wpplatform-comments .wpplatform-comment__body {
  flex: 1 1 auto;
  min-width: 0;
}

.wpplatform-comments .wpplatform-comment__meta {
  display: flex;
  gap: var(--school-space-2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--school-space-2);
}

.wpplatform-comments .wp-block-comment-author-name,
.wpplatform-comments .wp-block-comment-author-name a {
  color: var(--comments-heading);
  font-weight: 800;
  text-decoration: none;
}

.wpplatform-comments .wp-block-comment-date,
.wpplatform-comments .wp-block-comment-date a {
  color: var(--comments-primary);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  text-decoration: none;
}

.wpplatform-comments .wp-block-comment-content,
.wpplatform-comments .wp-block-comment-content p {
  color: var(--comments-text);
  font-size: var(--wp--preset--font-size--body-small);
  line-height: var(--wp--custom--line-height--body, 1.6);
}

.wpplatform-comments .wpplatform-comment__actions {
  gap: var(--school-space-2);
  margin-top: var(--school-space-2);
}

.wpplatform-comments .wp-block-comment-reply-link a,
.wpplatform-comments .wp-block-comment-edit-link a {
  color: var(--comments-primary);
  font-weight: 800;
  text-decoration: none;
}

.wpplatform-comments .wp-block-comment-template ol,
.wpplatform-comments .wp-block-comment-template ul {
  padding-left: var(--school-space-5);
}

.wpplatform-comments .wp-block-comment-content :where(ul, ol) {
  margin-block: var(--school-space-2);
}

.wpplatform-comments .wp-block-comment-content blockquote {
  margin: var(--school-space-2) 0;
  padding: var(--school-space-2) var(--school-space-3);
  border-left: 0.25rem solid var(--comments-secondary);
  background: var(--school-background);
}

.wpplatform-comments .wp-block-comment-content :where(pre, table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.wpplatform-comments__disabled {
  margin: 0;
  padding: var(--school-space-3);
  border: var(--school-card-border-width) solid var(--comments-border);
  border-radius: var(--comments-radius);
  background: var(--comments-surface);
  color: var(--comments-text);
  text-align: center;
}

.wpplatform-comments .wpplatform-comments__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--school-space-1);
  margin-block: var(--school-space-4);
}

.wpplatform-comments .wpplatform-comments__pagination a,
.wpplatform-comments .wpplatform-comments__pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-height: 2.5rem;
  padding: 0.65rem 0.9rem;
  border: var(--school-card-border-width) solid var(--comments-border);
  border-radius: var(--school-radius-pill);
  background: var(--school-background);
  color: var(--comments-primary);
  font-weight: 800;
  text-decoration: none;
}

.wpplatform-comments .comment-respond,
.wpplatform-comments .wp-block-post-comments-form {
  margin-top: var(--school-space-4);
  padding: var(--school-space-4);
  border: var(--school-card-border-width) solid color-mix(in srgb, var(--comments-border) 75%, transparent);
  border-radius: var(--comments-radius);
  background: linear-gradient(180deg, var(--comments-surface-alt), var(--school-background));
}

.wpplatform-comments .comment-reply-title {
  margin: 0 0 var(--school-space-2);
  color: var(--comments-heading);
  font-size: var(--wp--preset--font-size--heading-4);
}

.wpplatform-comments .comment-notes,
.wpplatform-comments .logged-in-as {
  color: var(--comments-text);
  font-size: var(--wp--preset--font-size--caption);
}

.wpplatform-comments .comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--school-space-3);
}

.wpplatform-comments .comment-form-comment,
.wpplatform-comments .comment-form-url,
.wpplatform-comments .comment-form-cookies-consent,
.wpplatform-comments .form-submit,
.wpplatform-comments .comment-notes,
.wpplatform-comments .logged-in-as {
  grid-column: 1 / -1;
}

.wpplatform-comments label {
  display: block;
  margin-bottom: var(--school-space-1);
  color: var(--comments-heading);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 800;
}

.wpplatform-comments input:not([type="checkbox"]),
.wpplatform-comments textarea {
  width: 100%;
  min-height: 3rem;
  border: var(--school-card-border-width) solid var(--comments-border);
  border-radius: var(--comments-radius);
  background: var(--school-background);
  color: var(--comments-text);
  font: inherit;
  padding: 0.8rem 1rem;
}

.wpplatform-comments textarea {
  min-height: 13rem;
  resize: vertical;
}

.wpplatform-comments input:focus-visible,
.wpplatform-comments textarea:focus-visible,
.wpplatform-comments a:focus-visible {
  outline: var(--school-focus-outline-width) var(--school-focus-outline-style) var(--school-focus-color);
  outline-offset: var(--school-focus-outline-offset);
}

.wpplatform-comments .comment-form-cookies-consent {
  display: flex;
  gap: var(--school-space-1);
  align-items: flex-start;
}

.wpplatform-comments .comment-form-cookies-consent label {
  margin: 0;
  color: var(--comments-text);
  font-weight: 400;
}

.wpplatform-comments .form-submit .submit {
  border: 0;
  border-radius: var(--school-button-radius);
  background: var(--comments-secondary);
  color: var(--school-background);
  cursor: pointer;
  font-weight: 800;
  padding: var(--school-button-padding-y) var(--school-button-padding-x);
  box-shadow: var(--school-shadow-button);
}

@media (max-width: 37.4375rem) {
  .wpplatform-comments {
    padding: var(--school-space-3);
  }

  .wpplatform-comments .wpplatform-comment {
    gap: var(--school-space-2);
  }

  .wpplatform-comments .wp-block-comment-template ol,
  .wpplatform-comments .wp-block-comment-template ul {
    padding-left: var(--school-space-3);
  }

  .wpplatform-comments .comment-form {
    grid-template-columns: 1fr;
  }
}