@media (prefers-color-scheme: dark) {

  .text-content blockquote::after,
  .cke_editable blockquote::after {
    background-color: var(--color--gray-20);
  }

  @supports (box-shadow: none) {

    .text-content a:where(:not(.button)),
    .cke_editable a:where(:not(.button)) {
      /* This adds 'color' so the text colour also transitions for added smoothness. */
      /* @todo Use this in light mode too? */
      transition-property: box-shadow, color;
    }

    .text-content a:where(:not(.button)):hover,
    .cke_editable a:where(:not(.button)):hover {
      /* Inherit text colour rather than hard coding a value. */
      color: inherit;

      /* These provide the background that covers the link on hover, so they need to use something that contrasts better with the dark background. */
      box-shadow: inset 0 -2em 0 0 var(--color--primary-30);
      text-decoration-color: var(--color--primary-30);

    }

  }

}