react-shiki/dist/style.css

Syntax highlighter component for react using shiki

@layer base {
  .rs-root {
    position: relative;

    &.rs-default-styles pre {
      border-radius: .5rem;
      padding: 1.25rem 1.5rem;
      overflow: auto;
    }

    & .rs-language-label {
      letter-spacing: -.05em;
      color: #6b7280d9;
      font-family: monospace;
      font-size: .75rem;
      position: absolute;
      top: .5rem;
      right: .75rem;
    }
  }
}
@layer base {
  .rs-has-line-numbers {
    counter-reset: line-number calc(var(--line-start, 1) - 1);

    & .rs-line-number:before {
      counter-increment: line-number;
      content: counter(line-number);
      box-sizing: content-box;
      min-width: var(--rs-line-numbers-width, 2ch);
      padding-left: var(--rs-line-numbers-padding-left, 0ch);
      padding-right: var(--rs-line-numbers-padding-right, 2ch);
      color: var(--rs-line-numbers-foreground, #6b728080);
      font-size: var(--rs-line-numbers-font-size, inherit);
      font-weight: var(--rs-line-numbers-font-weight, inherit);
      line-height: var(--rs-line-numbers-line-height, inherit);
      font-family: var(--rs-line-numbers-font-family, inherit);
      opacity: var(--rs-line-numbers-opacity, 1);
      user-select: none;
      pointer-events: none;
      justify-content: flex-end;
      align-items: flex-start;
      display: inline-flex;
    }
  }
}