/* A small copy control that sits in the top-right corner of the box it
   copies: the two-squares icon, swapped for a check and "Copied" after a
   click. The box it sits in needs position: relative. */
.copy-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.copy-btn:hover,
.copy-btn:focus-visible,
.copy-btn.is-copied {
  opacity: 1;
  background: color-mix(in oklab, currentColor 12%, transparent);
}

.copy-btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}