:root {
  --wpcomments-carb-text-color: rgba(0, 0, 0, .6);
  --wpcomments-carb-1: #c1e7f1;
  --wpcomments-carb-2: #c1f1d1;
  --wpcomments-carb-3: #fdf5c5;
  --wpcomments-carb-4: #fdd8c5;
  --wpcomments-carb-5: #e8e8e8;
}

.comment-author-role-badge {
  display: inline-block;
  padding: 3px 6px;
  margin-left: .5em;
  margin-right: .5em;
  background: #e8e8e8;
  border-radius: 2px;
  color: var(--wpcomments-carb-text-color);
  font-size: .75rem;
  font-weight: normal;
  text-transform: none;
  text-align: left;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.widget .comment-author-role-badge {
  display: none;
}

.comment-author-role-badge--administrator { background: var(--wpcomments-carb-1); }
.comment-author-role-badge--contributor   { background: var(--wpcomments-carb-2); }
.comment-author-role-badge--author        { background: var(--wpcomments-carb-3); }
.comment-author-role-badge--editor        { background: var(--wpcomments-carb-4); }
.comment-author-role-badge--subscriber    { background: var(--wpcomments-carb-5); }

.wp-block-comment-author-name .comment-author-role-badge {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.75rem;
  vertical-align: middle;
}

.wp-block-comment-content .comment-author-role-badge {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.75rem;
  vertical-align: middle;
}

.wp-block-comments .comment-author-role-badge {
  font-size: 0.75rem;
  vertical-align: middle;
}

.wp-block-comment-template .comment-author-role-badge {
  display: inline-block;
  margin-left: 0.5em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wpcomments-carb-text-color: rgba(255, 255, 255, .8);
    --wpcomments-carb-1: #2a5a6b;
    --wpcomments-carb-2: #2a6b3a;
    --wpcomments-carb-3: #6b5a2a;
    --wpcomments-carb-4: #6b3a2a;
    --wpcomments-carb-5: #4a4a4a;
  }
}

.current-theme--twentytwelve .comments-area .bypostauthor cite span {
  display: none;
}

.current-theme--twentytwentyone .comment-author-role-badge {
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.current-theme--twentytwentytwo .comment-author-role-badge,
.current-theme--twentytwentythree .comment-author-role-badge,
.current-theme--twentytwentyfour .comment-author-role-badge,
.current-theme--twentytwentyfive .comment-author-role-badge {
  margin-left: 0.5em;
  font-size: 0.7rem;
}