/*
Show the escaped and hide the real char:
  <span class="broken-code-point" data-escaped="DEL"><span class="char">{real-char}</span></span>
Only show the real-char:
  <span class="broken-code-point">{real-char}</span>
*/
.broken-code-point:not([data-escaped]),
.broken-code-point[data-escaped]::before {
  border-radius: 4px;
  padding: 0 2px;
  color: var(--color-body);
  background: var(--color-text-light-1);
}

.broken-code-point[data-escaped]::before {
  visibility: visible;
  content: attr(data-escaped);
}
.broken-code-point[data-escaped] .char {
  /* make it copyable by selecting the text (AI suggestion, no other solution) */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/*
Show the escaped and hide the real-char:
  <span class="unicode-escaped">
    <span class="escaped-code-point" data-escaped="U+1F600"><span class="char">{real-char}</span></span>
  </span>
Hide the escaped and show the real-char:
  <span>
    <span class="escaped-code-point" data-escaped="U+1F600"><span class="char">{real-char}</span></span>
  </span>
*/
.unicode-escaped .escaped-code-point[data-escaped]::before {
  visibility: visible;
  content: attr(data-escaped);
  color: var(--color-red);
}

.unicode-escaped .escaped-code-point .char {
  display: none;
}

.unicode-escaped .ambiguous-code-point {
  border: 1px var(--color-yellow) solid;
}