pre {
  overflow-x: auto;
}

pre:has(code) {
  position: relative;
}

pre code:not(:where(.not-content *)) {
  all: unset;
}

pre>code {
  counter-reset: line !important;
  overflow-x: auto !important;
}

figure[data-rehype-pretty-code-figure] pre {
  font-size: 85%;
  border-color: var(--color-spacer);
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
}

figure[data-rehype-pretty-code-figure] pre code {
  padding: .75rem 0;
}

span>code {
  font-size: 85%;
  border-color: var(--color-spacer);
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  padding: 0.2rem;
  display: inline-flex;
}

code {
  font-family: hyperbook-code, monospace;
  line-height: 2rem;
}

pre code [data-line] {
  line-height: 1.75rem !important;
  padding: 0 1rem;
}

button.rehype-pretty-copy {
  width: 18px !important;
  height: 18px !important;
  background: none;
  border: none;
  padding: 2px;
}

button.rehype-pretty-copy {
  & span {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}

button.rehype-pretty-copy {
  & .ready {
    background-image: var(--copy-icon);
  }
}

button.rehype-pretty-copy {
  & .ready {
    background-image: var(--copy-icon);
  }
}

button.rehype-pretty-copy.rehype-pretty-copied {
  & .ready {
    display: none;
  }
}

button.rehype-pretty-copy {
  & .success {
    display: none;
    background-image: var(--success-icon);
  }
}

button.rehype-pretty-copy {
  & .success {
    display: none;
    background-image: var(--success-icon);
  }
}

button.rehype-pretty-copy.rehype-pretty-copied {
  & .success {
    display: block;
  }
}

pre button.rehype-pretty-copy {
  top: 5px;
}

[data-highlighted-line] {
  background: var(--color-nav) !important;
}

[data-highlighted-line] span {
  background: none !important;
}

[data-highlighted-chars] {
  border-radius: 0.25rem;
  padding: .25rem;
  box-shadow: none;
  font-weight: 700;
  background-color: var(--color-nav) !important;
}

[data-highlighted-chars] span {
  background: none !important;
}

[data-chars-id] span {
  color: inherit !important;
}

[data-chars-id] {
  padding: .25rem;
  font-weight: 700;
}

[data-rehype-pretty-code-title] {
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  border-style: solid;
  border-width: 1px;
  border-bottom: none;
  padding: .5rem .75rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

figure[data-rehype-pretty-code-figure]:has(>[data-rehype-pretty-code-title]) pre {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important
}

code[data-line-numbers] {
  counter-reset: line;
}

code[data-line-numbers]>[data-line]::before {
  counter-increment: line;
  content: counter(line);

  /* Other styling */
  display: inline-block;
  width: 0.75rem;
  margin-right: 2rem;
  text-align: right;
  color: gray;
}

code[data-line-numbers-max-digits="2"]>[data-line]::before {
  width: 1.25rem;
}

code[data-line-numbers-max-digits="3"]>[data-line]::before {
  width: 1.75rem;
}

code[data-line-numbers-max-digits="4"]>[data-line]::before {
  width: 2.25rem;
}


code-input:not(.code-input_registered)::before {
  content: "..."!important;
}

/**
 * Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element 
 * or a parent element of it has the CSS class `line-numbers`.
 * https://prismjs.com/plugins/line-numbers/
 * Files: prism-line-numbers.css
 */
/* Update padding to match line-numbers plugin */
code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre,
.line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre {
  padding-left: max(3.8em, var(--padding, 16px))!important;
}

/* Ensure pre code/textarea just wide enough to give 100% width with line numbers */
code-input.line-numbers, .line-numbers code-input {
  grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding, 16px))));
}