/* "click-to-copy" elements */
/* use ::after to replace condent with a "copied!" message */
/* uses `copy.js` to set the `.copied` class */

.copy-container {

}

.copy-content {
    position: relative;
    z-index: 0;
}

.copy-content:hover {
    cursor: pointer;
    background: var(--link-hover-bg);
}

.copy-content::after {
    content: "Copied!";

    /* fill space */
    position: absolute;
    inset: 0;
    border-radius: inherit;

    /* center text */
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1.5px solid var(--brand);
    background: var(--accent-muted-bg);
    color: var(--brand);
    font-weight: bold;

    z-index: 1;                 /*place over content*/
    opacity: 0;
    pointer-events: none;       /*dont block clicks*/
    transition: opacity var(--hover-transition);
}

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

.copy-content.copied::after {
    opacity: 1;
}