.myuki-clipboard_btn {
    position: absolute;
    box-sizing: border-box;
    width: var(--myuki-clipboard_size);
    height: var(--myuki-clipboard_size);
    right: var(--myuki-clipboard_right);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-cp-bg);
    border-radius: 4px;
    border: 2px solid;
    padding: 4px;
    cursor: pointer;
    transition: .3s ease;
    opacity: 0.3;
}

.myuki-clipboard_btn:not(.success),
.myuki-clipboard_btn:not(.fail) {
    border-color: var(--color-cp-default);
    color: var(--color-cp-default);
}

.code-body:hover .myuki-clipboard_btn {
    opacity: 1;
}

.code-body .myuki-clipboard_btn.shown{
    opacity: 1;
}

.myuki-clipboard_btn:hover {
    border-color: var(--color-cp-hover);
    color: var(--color-cp-hover);
}

.myuki-clipboard_btn.success {
    color: #2ed573;
    border-color: #2ed573;
}

.myuki-clipboard_btn.fail {
    color: #ff4757;
    border-color: #ff4757;
}

.myuki-clipboard_btn svg {
    width: 100%;
    height: 100%;
}

.myuki-clipboard_btn svg * {
    fill: currentColor;
}

:root{
    --myuki-clipboard_size: 32px;
    --myuki-clipboard_right: 8px;
}

@media screen and (prefers-color-scheme:light) {
    :root {
        --color-cp-default: rgba(0, 0, 0, 0.5);
        --color-cp-hover: #2f3542;
        --color-cp-bg: rgba(255, 255, 255, 0.3)
    }
}

@media screen and (prefers-color-scheme:dark) {
    :root {
        --color-cp-default: rgba(255, 255, 255, 0.5);
        --color-cp-hover: #ffffff;
        --color-cp-bg: rgba(0, 0, 0, 0.3);
    }
}