1article {
  2  code {
  3    font-family: var(--kp-font-mono), ui-monospace, monospace,
  4      var(--kp-font-emoji);
  5  }
  6
  7  code:not(:is(pre > code)) {
  8    font-size: 1rem;
  9    line-height: 1.5rem;
 10  }
 11
 12  div.hypraw {
 13    position: relative;
 14    font-size: 1rem;
 15    line-height: 1.5rem;
 16    margin-top: 1.25rem;
 17    margin-bottom: 1.25rem;
 18    border-top: 1px solid;
 19    border-bottom: 1px solid;
 20    border-color: color-mix(in oklab, var(--color-base-content) 60%,
 21      transparent);
 22
 23    pre {
 24      margin: 0;
 25      overflow-x: auto;
 26
 27      > code {
 28        display: block;
 29        padding: 0.5rem;
 30
 31        &[data-lang]::before {
 32          position: absolute;
 33          top: 0.5rem;
 34          right: 0.5rem;
 35          z-index: 1;
 36          padding-left: 0.25rem;
 37          padding-right: 0.25rem;
 38          border: 1px solid color-mix(in oklab, var(--color-base-content) 60%,
 39            transparent);
 40          border-radius: 0.25rem;
 41          opacity: 1;
 42          font-size: 0.875rem;
 43          line-height: 1.25rem;
 44          color: var(--color-base-content);
 45          background-color: var(--color-base-300);
 46          content: attr(data-lang);
 47          transition: opacity 0.2s;
 48        }
 49
 50        &:hover::before {
 51          opacity: 0;
 52        }
 53      }
 54
 55      &::-webkit-scrollbar,
 56      &::-webkit-scrollbar-track {
 57        background-color: inherit;
 58        border-bottom-left-radius: 0.25rem;
 59        border-bottom-right-radius: 0.25rem;
 60      }
 61
 62      &::-webkit-scrollbar-thumb {
 63        background-color: var(--color-base-300);
 64        border: 4px solid transparent;
 65        border-radius: 0.75rem;
 66        background-clip: content-box;
 67      }
 68
 69      &::-webkit-scrollbar-thumb:hover {
 70        background-color: var(--color-base-content);
 71      }
 72    }
 73
 74    &.has-line-numbers .ec-line {
 75      position: relative;
 76      display: grid;
 77      grid-template-columns: auto 1fr;
 78
 79      .code {
 80        position: relative;
 81        padding-left: 0.5rem;
 82      }
 83    }
 84
 85    .gutter {
 86      border-right: 1px solid color-mix(in oklab, var(--color-base-content) 40%,
 87        transparent);
 88      user-select: none;
 89      color: var(--color-base-content);
 90
 91      .ln {
 92        display: inline-flex;
 93        justify-content: flex-end;
 94        align-items: flex-start;
 95        min-width: 2em;
 96        padding-right: 0.5rem;
 97      }
 98    }
 99
100    .ec-line {
101      &.highlight {
102        background-color: color-mix(in oklab, var(--color-base-content) 10%,
103          transparent);
104      }
105
106      &.ins {
107        background-color: color-mix(in oklab, var(--color-success) 25%,
108          transparent);
109      }
110
111      &.del {
112        background-color: color-mix(in oklab, var(--color-error) 25%,
113          transparent);
114      }
115    }
116  }
117}