/* * The copy button that copy-code.js adds to code blocks. It follows the sidebar's icon buttons * (hyde.css, .sidebar-social-item): a borderless square with a faint fill, a small rounded * corner and a Fork Awesome icon, darkening on hover and focus. It sits inside the block's * existing padding, so a block is exactly as tall as it was before the button existed. * * #ebebeb is the code background from poole.css; #ac4142 is the theme accent from hyde.css. */ /* A wrapper for plain fences, which pandoc leaves as a bare 
. It must not change the
   spacing: .9rem is the margin poole.css gives 
. */
.code-block {
  margin-bottom: 0.9rem;
}

.code-block > pre {
  margin-bottom: 0;
}

/* overflow is clipped so the block keeps its rounded corners. */
.has-copy {
  position: relative;
  overflow: hidden;
  border-radius: 0.2rem;
}

/*
 * Where the scrolling happens. Normally the  scrolls and the button would have to sit
 * beside it, painted over its scrollbar. Here the block's wrapper scrolls instead, the 
 * inside it is as wide as its longest line (at least as wide as the block), and the button
 * lives in that 
. The scrollbar belongs to the wrapper, so it is painted above
 * everything in it, button included, and runs the full width of the block.
 *
 * The 
 is the wide element, not the , because the button's anchor (below) can only
 * travel within its parent's content box, and the 's right padding, which is the room
 * the button takes at the end of the longest line, is inside the 
's content box but not
 * its own. With that room, scrolling all the way right brings the end of the line clear of
 * the button.
 *
 * On screen only; a printed block wraps and has no button.
 */
@media screen {
  .has-copy {
    overflow: auto hidden;
  }

  .has-copy pre {
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
  }

  .has-copy pre > code {
    padding-right: 2.5rem;
    overflow: visible;
  }

  /*
   * Classic scrollbars only (copy-code.js adds the class on  when the browser draws a
   * scrollbar that takes space; overlay scrollbars, which take none, are left as they are).
   * The default is a 15px track with arrow buttons under every block that scrolls, which is
   * heavy next to the code. So: a thin scrollbar with a faint thumb on a transparent track,
   * and, on a block that actually scrolls, the 
 is pulled down by the scrollbar's
   * thickness (--copy-scrollbar, measured by the script) so that the scrollbar sits in the
   * block's bottom padding instead of under it, as an overlay scrollbar does. The block is
   * then exactly as tall as one with no scrollbar. The wrapper takes the grey, so the track
   * is the block's colour rather than the page's.
   */
  .copy-classic-scrollbars .has-copy {
    scrollbar-width: thin;
    scrollbar-color: rgb(0 0 0 / 28%) transparent;
  }

  .copy-classic-scrollbars .has-copy.copy-scrolls {
    background-color: #ebebeb;
  }

  .copy-classic-scrollbars .has-copy.copy-scrolls pre {
    margin-bottom: calc(-1 * var(--copy-scrollbar));
  }
}

/*
 * Zero-size and in the flow at the very start of the 
, so that it is the thing that
 * sticks: `left` pins it 1.825rem (the button's width plus its inset) in from the right edge
 * of the visible area, whatever the scroll position. The button and the fade hang off it
 * absolutely. The z-index keeps it above the code, which pandoc.css makes `position: relative`
 * and which comes later in the markup.
 */
.has-copy pre > .copy-anchor {
  position: sticky;
  z-index: 1;
  left: calc(100% - 1.825rem);
  display: block;
  width: 0;
  height: 0;
  line-height: 0;
}

/* The button is 1.5rem square with an equal inset on its top and right; in a one-line block
   (about 2.15rem tall) that leaves it centred. */
.copy-code {
  position: absolute;
  top: 0.325rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  color: #767676;
  cursor: pointer;
  user-select: none;
  background-color: #e3e3e3;
  border: 0;
  border-radius: 0.25rem;
  transition:
    color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Where a long line runs under the button, the code fades out into the block's colour. This
   is a thin strip at the button's own height, reaching the block's right edge: opaque behind
   the button and its gap to the edge, ramping up over the 0.8rem to its left, and covering
   nothing else (not the scrollbar below it). It is under the button and over the text. */
.copy-code-fade {
  position: absolute;
  top: 0.325rem;
  left: -0.8rem;
  width: 2.65rem;
  height: 1.5rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, #ebebeb 0.8rem);
}

.copy-code:focus-visible {
  outline: 2px solid #ac4142;
  outline-offset: 1px;
}

/* Hovering the block firms the icon up a little; hovering the button itself firms it up more
   and darkens the fill, as the sidebar icons do. */
.has-copy:hover .copy-code {
  color: #515151;
}

.has-copy .copy-code:hover {
  color: #202020;
  background-color: #d3d3d3;
}

/* Success and failure are told apart by the icon (a check, a cross), not by colour alone. */
.has-copy .copy-code[data-state="done"] {
  color: #ac4142;
}

.has-copy .copy-code[data-state="error"] {
  color: #515151;
}

/* Visually hidden, but still announced: the status text for screen readers. */
.copy-code-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  user-select: none;
}

/* Fingers need a bigger target than a mouse pointer. The icon stays the same size; an
   invisible area around it takes the taps. */
@media (pointer: coarse) {
  .copy-code::after {
    position: absolute;
    inset: -0.4rem;
    content: "";
  }
}

@media (prefers-reduced-motion: reduce) {
  .copy-code {
    transition: none;
  }
}

@media print {
  .has-copy pre > .copy-anchor {
    display: none;
  }
}