/* Copy-to-clipboard buttons on code blocks.
   Hand-written for the readthedocs theme; see javascripts/copybutton.js. */

.copy-wrap {
  position: relative;
}

/* Keep the button clear of the code itself. The theme sets padding: 12px;
   only the right side needs widening to make room. */
.copy-wrap pre {
  padding-right: 5em;
}

.copy-button {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border: 1px solid #2980b9;
  border-radius: 3px;
  background: #fff;
  /* The readthedocs theme's accent blue, so the button reads as part of the
     site rather than as a bolted-on widget. */
  color: #2980b9;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Fill in on hover/focus: visible at rest, unmistakable when pointed at. */
.copy-button:hover,
.copy-button:focus {
  background: #2980b9;
  color: #fff;
}

/* Keyboard users must always be able to see where focus landed. */
.copy-button:focus {
  outline: 2px solid #2980b9;
  outline-offset: 1px;
}

.copy-button.copy-done,
.copy-button.copy-done:hover {
  background: #1abc9c;
  border-color: #1abc9c;
  color: #fff;
}

/* Never print the buttons. */
@media print {
  .copy-button { display: none; }
}