/* Copy button and copy feedback for code blocks; wayscriber-copy.js drives
   the feedback. */

/* mdBook only shows the copy button while the pointer is over the block.
   Keep it on screen, so it can be found at a glance and on touch screens. */
pre > .buttons {
    visibility: visible;
    opacity: 1;
}

/* The check that replaces mdBook's clipboard icon after a copy. Same box
   and black stroke as the clipboard image, so the theme's
   --copy-button-filter recolours it the same way. */
pre > .buttons button.clip-button[data-copied]::before {
    content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 24 25" \
xmlns="http://www.w3.org/2000/svg"><path d="M4 13.5l5.5 5.5L20 6.5" fill="none" stroke="black" \
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* The check already says it worked, so drop mdBook's "Copied!" tooltip.
   "Clipboard error!" still shows. */
pre > .buttons button.clip-button[data-copied] .tooltiptext {
    visibility: hidden;
}

/* The canvas and CSS fallback share the block's border box. The canvas
   clips its own pixels, so the copy button and scrolling code stay usable. */
.copy-light {
    position: absolute;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* These gradients run only when WebGL is unavailable. The narrow masked
   layer catches the border locally, with more light along the top edge. */
pre::before,
pre::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    background-size: calc(200% + var(--copy-light-reach, 160px) * 2) 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
}
pre[data-copy-light-fallback]::before,
pre[data-copy-light-fallback]::after {
    mix-blend-mode: plus-lighter;
}
pre::after {
    background-image: linear-gradient(
        102.4deg,
        transparent calc(50% - var(--copy-light-band, 70px) * 2.1),
        rgb(var(--copy-light-color, 36 0 255) / calc(var(--copy-light-strength, 0.09) * 0.13))
            calc(50% - var(--copy-light-band, 70px) * 0.9),
        rgb(var(--copy-light-color, 36 0 255) / calc(var(--copy-light-strength, 0.09) * 0.6))
            calc(50% - var(--copy-light-band, 70px) * 0.45),
        rgb(var(--copy-light-color, 36 0 255) / var(--copy-light-strength, 0.09)) 50%,
        rgb(var(--copy-light-color, 36 0 255) / calc(var(--copy-light-strength, 0.09) * 0.6))
            calc(50% + var(--copy-light-band, 70px) * 0.45),
        rgb(var(--copy-light-color, 36 0 255) / calc(var(--copy-light-strength, 0.09) * 0.13))
            calc(50% + var(--copy-light-band, 70px) * 0.9),
        transparent calc(50% + var(--copy-light-band, 70px) * 2.1)
    );
}
pre::before {
    box-sizing: border-box;
    padding: 1.5px;
    background-image: linear-gradient(
        102.4deg,
        transparent calc(50% - var(--copy-light-band, 70px) * 2.1),
        rgb(255 255 255 / 0.03) calc(50% - var(--copy-light-band, 70px) * 0.9),
        rgb(255 255 255 / 0.14) calc(50% - var(--copy-light-band, 70px) * 0.45),
        rgb(255 255 255 / 0.24) 50%,
        rgb(255 255 255 / 0.14) calc(50% + var(--copy-light-band, 70px) * 0.45),
        rgb(255 255 255 / 0.03) calc(50% + var(--copy-light-band, 70px) * 0.9),
        transparent calc(50% + var(--copy-light-band, 70px) * 2.1)
    );
    mask-image: linear-gradient(#000, #0003), linear-gradient(#000, #000);
    mask-clip: border-box, content-box;
    mask-composite: subtract;
}

/* Light themes use a low-opacity dark band to keep code readable. */
.light pre[data-copy-light-fallback]::before,
.light pre[data-copy-light-fallback]::after,
.rust pre[data-copy-light-fallback]::before,
.rust pre[data-copy-light-fallback]::after {
    mix-blend-mode: multiply;
}
.light pre::after,
.rust pre::after {
    --copy-light-color: 0 0 0;
}
.light pre::before,
.rust pre::before {
    background-image: linear-gradient(
        102.4deg,
        transparent calc(50% - var(--copy-light-band, 70px) * 2.1),
        rgb(0 0 0 / 0.008) calc(50% - var(--copy-light-band, 70px) * 0.9),
        rgb(0 0 0 / 0.04) calc(50% - var(--copy-light-band, 70px) * 0.45),
        rgb(0 0 0 / 0.065) 50%,
        rgb(0 0 0 / 0.04) calc(50% + var(--copy-light-band, 70px) * 0.45),
        rgb(0 0 0 / 0.008) calc(50% + var(--copy-light-band, 70px) * 0.9),
        transparent calc(50% + var(--copy-light-band, 70px) * 2.1)
    );
}