@layer repui.components {
  :where(.rui-code-block) {
    position: relative;
    inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--rui-code-block-border);
    border-radius: var(--rui-code-block-radius);
    background: var(--rui-code-block-background);
    color: var(--rui-code-block-color);
  }

  :where(.rui-code-block__pre) {
    max-block-size: var(--rui-code-block-max-height);
    margin: 0;
    overflow: auto;
    padding: var(--rui-code-block-padding);
    padding-block-start: calc(var(--rui-code-block-padding-block, 1rem) + 2.25rem);
    scrollbar-gutter: stable;
  }

  :where(.rui-code-block__code) {
    display: block;
    min-inline-size: max-content;
    font-family: var(--rui-font-family-mono);
    font-size: var(--rui-code-block-font-size);
    line-height: var(--rui-code-block-line-height);
    white-space: pre;
  }

  :where(.rui-code-block__language) {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-end: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    cursor: pointer;
    padding: .25rem .5rem;
    border: 1px solid var(--rui-code-block-border);
    border-radius: var(--rui-radius-sm);
    background: var(--rui-code-block-label-background);
    color: var(--rui-code-block-label-color);
    font-size: var(--rui-font-size-xs);
    font-weight: var(--rui-font-weight-semibold);
    text-transform: uppercase;
  }

  :where(.rui-code-block__language:hover, .rui-code-block__language:focus-visible) {
    background: var(--rui-color-surface);
  }

  :where(.rui-code-block__copy > .rui-icon) {
    pointer-events: none;
  }

  :where(.rui-code-token--comment) { color: var(--rui-color-text-muted); }
  :where(.rui-code-token--tag, .rui-code-token--keyword) { color: var(--rui-color-primary); }
  :where(.rui-code-token--attr, .rui-code-token--template-variable) { color: var(--rui-color-info, var(--rui-color-primary)); }
  :where(.rui-code-token--string, .rui-code-token--variable) { color: var(--rui-color-success); }
  :where(.rui-code-token--number) { color: var(--rui-color-warning); }
  :where(.rui-code-token--punctuation) { color: var(--rui-color-text-muted); }

  :where(.rui-code-block .hljs-comment) { color: var(--rui-color-text-muted); }
  :where(.rui-code-block .hljs-tag, .rui-code-block .hljs-keyword,
    .rui-code-block .hljs-selector-tag) { color: var(--rui-color-primary); }
  :where(.rui-code-block .hljs-attr, .rui-code-block .hljs-attribute,
    .rui-code-block .hljs-template-variable) { color: var(--rui-color-info, var(--rui-color-primary)); }
  :where(.rui-code-block .hljs-string, .rui-code-block .hljs-variable,
    .rui-code-block .hljs-number, .rui-code-block .hljs-literal) { color: var(--rui-color-success); }
  :where(.rui-code-block .hljs-title, .rui-code-block .hljs-name,
    .rui-code-block .hljs-built_in) { color: var(--rui-color-warning); }
}