docs/_templates/css/code.css
@layer components {
  code:not(.torchlight) {
    @apply bg-code p-3;
    border-radius: 0.375rem;
  }
  /* Hide the default markers, as we provide our own */
  .torchlight details > summary::marker,
  .torchlight details > summary::-webkit-details-marker {
    display: none;
  }

  .torchlight details .summary-caret::after {
    pointer-events: none;
  }

  /* Add spaces to keep everything aligned */
  .torchlight .summary-caret-empty::after,
  .torchlight details .summary-caret-middle::after,
  .torchlight details .summary-caret-end::after {
    content: ' ';
  }

  /* Show a minus sign when the block is open. */
  .torchlight details[open] .summary-caret-start::after {
    content: '-';
  }

  /* And a plus sign when the block is closed. */
  .torchlight details:not([open]) .summary-caret-start::after {
    content: '+';
  }

  /* Hide the [...] indicator when open. */
  .torchlight details[open] .summary-hide-when-open {
    display: none;
  }

  /* Show the [...] indicator when closed. */
  .torchlight details:not([open]) .summary-hide-when-open {
    display: initial;
  }

  pre {
    background-color: #2e3440 !important;
    @apply mt-20 rounded overflow-x-auto;
  }

  pre code.torchlight {
    @apply block p-20 min-w-max;
  }

  pre code.torchlight .line {
    @apply px-20;
  }

  pre code.torchlight .line-number,
  pre code.torchlight .summary-caret {
    @apply mr-20;
  }

  .torchlight.has-focus-lines .line:not(.line-focus) {
    transition: filter 0.35s, opacity 0.35s;
    filter: blur(0.095rem);
    opacity: 0.65;
  }

  .torchlight.has-focus-lines:hover .line:not(.line-focus) {
    filter: blur(0);
    opacity: 1;
  }

  .torchlight summary:focus {
    outline: none;
  }
}
