1code:not(:is(pre > code)) {
 2  @apply text-base lg:text-lg;
 3}
 4
 5div.hypraw {
 6  @apply relative text-base lg:text-lg mt-5 mb-5;
 7  @apply border-y;
 8
 9  pre {
10    @apply m-0 overflow-x-auto;
11
12    & > code {
13      @apply block p-2;
14
15      &[data-lang]::before {
16        @apply absolute top-2 right-2 z-1;
17        @apply px-1 rounded border opacity-100 text-sm lg:text-base;
18        @apply text-neutral-600 bg-neutral-100;
19        @variant dark {
20          @apply bg-neutral-900 text-neutral-400;
21        }
22        content: attr(data-lang);
23        transition: opacity 0.2s;
24      }
25      &:hover::before {
26        @apply opacity-0;
27      }
28    }
29
30    &::-webkit-scrollbar,
31    &::-webkit-scrollbar-track {
32      @apply bg-inherit rounded-b;
33    }
34    &::-webkit-scrollbar-thumb {
35      @apply bg-neutral-400 dark:bg-neutral-600;
36      @apply border-4 border-transparent rounded-xl bg-clip-content;
37    }
38    &::-webkit-scrollbar-thumb:hover {
39      @apply bg-neutral-500;
40    }
41  }
42
43  &.has-line-numbers .ec-line {
44    @apply relative grid grid-cols-[auto_1fr];
45
46    .code {
47      @apply relative pl-2;
48    }
49  }
50
51  .gutter {
52    @apply border-r;
53    @apply select-none;
54    @apply text-neutral-600 dark:text-neutral-400; /* TODO: Replace with theme color */
55
56    .ln {
57      @apply inline-flex justify-end items-start min-w-[2em] pr-2;
58    }
59  }
60}