/* this has to apply to the parent of the pre block, because the pre scrolls
   but the container of the copy button should not scroll */
div:has(pre > copy-button) {
  position: relative;
}

copy-button {
  width: 3rem;
  height: 1.1rlh;
  font-size: 0.8rem;
  background: var(--copy-button-background);
  margin-top: inherit; /* usually from browser styles */
}

copy-button + code {
  /* leave room for the copy button to not overlap */
  padding-right: 3rem;
  display: inline-block;
}

code {
  font-size: 0.9rem;
}

:root {
  --copy-button-background: #330b;
}

@media (prefers-color-scheme: light) {
  :root {
    --copy-button-background: #eefb;
  }
}