/*
 * Copy-code toolbar — lives INSIDE the <pre> as the first child, so
 * the pre's own background + radius + padding wrap the toolbar + the
 * code as one block. No seam, no cascade fight with per-surface `pre`
 * margin rules.
 *
 * The wrap itself has no background, no margin, and no padding (the
 * pre's padding gives the button breathing room from the code below).
 * It's just a flex line that right-aligns the button.
 *
 * Lives in this lib stylesheet (not in a page stylesheet) because
 * decorateCodeBlocks() runs on every surface that renders rendered
 * markdown — post body, comment body, course-lesson body — and the
 * styling has to be identical wherever it's mounted. Pulling the CSS
 * in via the lib's TS module guarantees they ship together.
 */

.copy-code-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
  background: transparent;
  /* Negative top margin pulls the button up into the pre's top
     padding so the row above the code doesn't visibly take vertical
     space — the button overlays the empty top-right corner of the
     fence rather than pushing the code down. */
  margin-top: -0.25rem;
}

/* Framework button.css gives every <button> a 36px height, ink color,
   and light-fill :hover/:active/:focus backgrounds. None of those apply
   on a dark <pre>: the framework's --bg-soft / --bg-panel fills turn
   the pill BRIGHT WHITE on tap (and on mobile the :focus state lingers,
   so the pill stays white and the dim-white label becomes unreadable).
   Override every interactive state explicitly to keep the pill flat
   and the label legible. */
.copy-code-btn,
.copy-code-btn:hover,
.copy-code-btn:active,
.copy-code-btn:focus,
.copy-code-btn:focus-visible {
  height: auto;
  min-height: 0;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transform: none;
  transition: color 100ms, border-color 100ms;
}

.copy-code-btn {
  color: rgba(255, 255, 255, 0.7);
}
.copy-code-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.copy-code-btn:active,
.copy-code-btn:focus,
.copy-code-btn:focus-visible {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.18);
}

.copy-code-btn.is-copied,
.copy-code-btn.is-copied:hover,
.copy-code-btn.is-copied:active,
.copy-code-btn.is-copied:focus,
.copy-code-btn.is-copied:focus-visible {
  color: var(--green);
  border-color: rgba(90, 197, 88, 0.55);
}