/* Zero-impact layout container that shifts the block underneath it */
.copycode-btn-holder {
    display: flex;
    justify-content: flex-end;
    height: 32px;               /* Matches the height footprint of the icon */
    margin-bottom: -32px;       /* Pulls the code block directly underneath it */
    position: relative;
    z-index: 1;                 /* Sits cleanly on top of the code text layers */
    pointer-events: none;       /* Allows code selection clicks to pass through the empty areas */
}

/* Restores click capture specifically for the button icon itself */
div.copycode-btn-holder button.btn-copy-code {
    pointer-events: auto;
    border: none !important;
    background-color: transparent !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
    line-height: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    transition: transform 0.1s ease-in-out;
    -webkit-transition: -webkit-transform 0.1s ease-in-out;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0.33;
    
    /* Enforced background settings */
    width: 32px !important;
    height: 32px !important;
    background-image: url('images/clipboard.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: none !important;
}

div.copycode-btn-holder button.btn-copy-code:hover {
    opacity: 1 !important;
}

/* Enlarge smoothly on top of everything without creating scrollbars */
div.copycode-btn-holder button.btn-copy-code:active {
    transform: scale(1.95) !important;
    -webkit-transform: scale(1.95) !important;
    opacity: 1 !important;
}
