/* all code */
.code {
  font-size: 0.925em;
  color: var(--code-text);
  tab-size: 2;
  page-break-inside: avoid;
  background-color: var(--code-background);
  border: 1px solid var(--kinda-light);
  border-radius: var(--rounded-edge-radius);

  /* light-dark theme switch fading */
  transition: background 0.25s ease, border 0.25s ease;
}

/* inline code in paragraphs/elsewhere (single backticks) */
.inline {
  padding: 0.2em 0.3em;
}

.block {
  position: relative;
  width: 100%;
  margin: 1em auto;
}

.copy_btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.65em;
  color: var(--medium-dark);
  background-color: var(--background-inner);
  border: 1px solid var(--kinda-light);
  border-top-right-radius: var(--rounded-edge-radius);
  border-end-start-radius: var(--rounded-edge-radius);

  /* light-dark theme switch fading */
  transition: background 0.25s ease, border 0.25s ease;
}

.copy_btn:hover {
  color: var(--link);
}

/* the following sub-classes MUST be global -- the highlight rehype plugin isn't aware of this file */

.block :global(.code-highlight) {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

/* leave room for clipboard button to the right of the first line */
.block :global(.code-highlight) > :global(.code-line:first-of-type) {
  margin-right: 3em;
}

.block :global(.code-highlight) > :global(.code-line.line-number::before) {
  display: inline-block;
  width: 1.5em;
  margin-right: 1.5em;
  text-align: right;
  color: var(--code-comment);
  content: attr(line); /* added to spans by prism */
}

.block :global(.code-highlight) :global(.token.comment),
.block :global(.code-highlight) :global(.token.prolog),
.block :global(.code-highlight) :global(.token.cdata) {
  color: var(--code-comment);
}

.block :global(.code-highlight) :global(.token.delimiter),
.block :global(.code-highlight) :global(.token.boolean),
.block :global(.code-highlight) :global(.token.keyword),
.block :global(.code-highlight) :global(.token.selector),
.block :global(.code-highlight) :global(.token.important),
.block :global(.code-highlight) :global(.token.doctype),
.block :global(.code-highlight) :global(.token.atrule),
.block :global(.code-highlight) :global(.token.url) {
  color: var(--code-keyword);
}

.block :global(.code-highlight) :global(.token.tag),
.block :global(.code-highlight) :global(.token.builtin),
.block :global(.code-highlight) :global(.token.regex) {
  color: var(--code-namespace);
}

.block :global(.code-highlight) :global(.token.property),
.block :global(.code-highlight) :global(.token.constant),
.block :global(.code-highlight) :global(.token.variable),
.block :global(.code-highlight) :global(.token.attr-value),
.block :global(.code-highlight) :global(.token.class-name),
.block :global(.code-highlight) :global(.token.string),
.block :global(.code-highlight) :global(.token.char) {
  color: var(--code-variable);
}

.block :global(.code-highlight) :global(.token.literal-property),
.block :global(.code-highlight) :global(.token.attr-name) {
  color: var(--code-attribute);
}

.block :global(.code-highlight) :global(.token.function) {
  color: var(--code-literal);
}

.block :global(.code-highlight) :global(.token.tag .punctuation),
.block :global(.code-highlight) :global(.token.attr-value .punctuation) {
  color: var(--code-punctuation);
}

.block :global(.code-highlight) :global(.token.inserted) {
  background-color: var(--code-addition);
}

.block :global(.code-highlight) :global(.token.deleted) {
  background-color: var(--code-deletion);
}

.block :global(.code-highlight) :global(.token.url) {
  text-decoration: underline;
}

.block :global(.code-highlight) :global(.token.bold) {
  font-weight: bold;
}

.block :global(.code-highlight) :global(.token.italic) {
  font-style: italic;
}