/* static/css/copy-button.css
   Scoped to .copy-wrapper so it doesn't override theme highlighter styles
*/

.copy-wrapper {
  position: relative; /* enables absolute positioning of the button inside the wrapper */
}

/* Button styling - very specific to avoid collisions */
.copy-wrapper > .copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.95);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  z-index: 9999; /* very high so theme overlays won't cover it */
  pointer-events: auto; /* ensure clickable even if wrapper has pointer rules */
  color: #111; /* button text color (independent from code's colors) */
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* If your theme uses dark backgrounds, use a slightly translucent dark button instead
   Uncomment below and comment the lighter background above if you want dark mode support */
/*
.copy-wrapper > .copy-btn {
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
}
*/

/* Focus state for keyboard users */
.copy-wrapper > .copy-btn:focus {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}

/* Feedback state */
.copy-wrapper > .copy-btn.copied {
  background: #e6ffed;
  border-color: #c1f0c8;
}

/* Hide the label on small screens to save space */
@media (max-width: 520px) {
  .copy-wrapper > .copy-btn .label { display: none; }
}

/* Optional: show on hover only (cleaner). Uncomment if you prefer that */
 /*
.copy-wrapper > .copy-btn { opacity: 0; transition: opacity .12s ease; }
.copy-wrapper:hover > .copy-btn { opacity: 1; }
*/