/*
 * Copy-to-clipboard button on code blocks.
 *
 * A single enhancer in templates/base.html wraps every highlighted `<pre>` on
 * the page (`pre.z-code`, excluding mermaid diagrams) in a `.code-copy-wrap`
 * and appends a `.copy-btn`. It is shared by the docs pages, the landing page,
 * and the blog, so all three look and behave the same. Loaded after the
 * theme's main.css so it wins by source order.
 */
.code-copy-wrap { position: relative; }

.code-copy-wrap .copy-btn {
  position: absolute;
  top: .4rem;
  right: .4rem;
  padding: .12rem .5rem;
  font-size: .72rem;
  line-height: 1.5;
  color: #57606a;
  background: rgba(246, 248, 250, .85);
  border: 1px solid #d0d7de;
  border-radius: .25rem;
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s ease-in-out;
}

.code-copy-wrap:hover .copy-btn,
.code-copy-wrap .copy-btn:focus { opacity: 1; }

.code-copy-wrap .copy-btn.copied { color: #1a7f37; border-color: #1a7f37; }

body.dark .code-copy-wrap .copy-btn {
  color: #8b949e;
  background: rgba(27, 31, 34, .7);
  border-color: #2b2f33;
}

body.dark .code-copy-wrap .copy-btn.copied { color: #3fb950; border-color: #3fb950; }