/*
 * Copy-to-clipboard buttons for code blocks and callout blocks.
 * Paired with static/js/components/code-copy.js.
 */

.ck-copy-wrap {
    position: relative;
}

.ck-copy-wrap > .ck-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.4));
    border-radius: 0.375rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, inherit);
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
}

.ck-copy-wrap:hover > .ck-copy-btn,
.ck-copy-wrap > .ck-copy-btn:focus-visible,
.ck-copy-wrap > .ck-copy-btn.is-copied,
.ck-copy-wrap > .ck-copy-btn.is-error {
    opacity: 1;
}

.ck-copy-wrap > .ck-copy-btn.is-copied {
    color: var(--bs-success, #198754);
}

.ck-copy-wrap > .ck-copy-btn.is-error {
    color: var(--bs-danger, #dc3545);
}

/* Keep code clear of the overlapping button */
.ck-copy-wrap > pre {
    padding-right: 3.5rem;
}

.ck-copy-wrap > .codehilite {
    padding-right: 3.5rem;
}

@media (hover: none) {

    /* Touch devices: keep the button visible without hover */
    .ck-copy-wrap > .ck-copy-btn {
        opacity: 0.8;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ck-copy-wrap > .ck-copy-btn {
        transition: none;
    }
}