/**
 * Inline code
 **/

.code {
  padding: 0.2em 0.3em;
  font-size: 0.925em;
  tab-size: 2px;
  page-break-inside: avoid;
  background-color: var(--color-background-header);
  border: 1px solid var(--color-gray-300);
  border-radius: 0.6em;
}

/**
 * Syntax-highlighted code blocks
 **/

figure:has(.code) {
  margin: 1em 0;
  position: relative;
  width: 100%;
  border-radius: 0.6em;
}

figure .code {
  display: block;
  overflow-x: auto;
  padding: 1em;
  counter-reset: line;
}

figure .code [style*="--shiki"] {
  color: var(--shiki-light);
  font-style: var(--shiki-light-font-style);
  font-weight: var(--shiki-light-font-weight);
  text-decoration: var(--shiki-light-text-decoration);
}

[data-theme="dark"] figure .code [style*="--shiki"] {
  color: var(--shiki-dark);
  font-style: var(--shiki-dark-font-style);
  font-weight: var(--shiki-dark-font-weight);
  text-decoration: var(--shiki-dark-text-decoration);
}

figure .code > [data-line]:nth-of-type(1),
figure .code > [data-line]:nth-of-type(2) {
  /* excessive right padding to prevent copy button from covering the first two lines of code */
  padding-right: 4em;
}

figure .code[data-line-numbers] > [data-line]::before {
  display: inline-block;
  width: 1em;
  margin-right: 1.5em;
  text-align: right;
  color: var(--color-gray-500);
  user-select: none;
  counter-increment: line;
  content: counter(line);
}

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

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

.copyButton {
  position: absolute;
  top: 0;
  right: 0;
  height: 3em;
  width: 3em;
  padding: 0; /* iOS safari fix */
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  border-top-right-radius: 0.6em;
  border-bottom-left-radius: 0.6em;
  background-color: var(--color-background-header);
  backdrop-filter: saturate(180%) blur(5px);
}

.copyButton > svg {
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
}

.copyButton:hover,
.copyButton:focus-visible {
  color: var(--color-link);
}