:root {
    --cbp-padding: 1em;
    --cbp-padding-top: 3.5em;
    --cbp-line-numbers-padding: 3.8em;
    --cbp-toolbar-top: .7em;
    --cbp-toolbar-left: .7em;
    --cbp-toolbar-z-index: 10;
    --cbp-button-bg: #61afef;
    --cbp-button-color: #fff;
    --cbp-button-padding: .4em .8em;
    --cbp-button-radius: .3em;
    --cbp-button-font-size: .8em;
    --cbp-button-opacity: .8;
    --cbp-button-hover-opacity: 1;
    --cbp-button-copied-bg: #98c379;
    --cbp-icon-size: 1em;
}

pre[class*='language-'] {
    position: relative;
    padding: var(--cbp-padding);
    padding-top: var(--cbp-padding-top);
}

pre.line-numbers {
    padding-left: var(--cbp-line-numbers-padding);
}

.code-toolbar {
    position: absolute;
    top: var(--cbp-toolbar-top);
    left: var(--cbp-toolbar-left);
    z-index: var(--cbp-toolbar-z-index);
}

.toolbar-button {
    background-color: var(--cbp-button-bg);
    color: var(--cbp-button-color);
    border: none;
    padding: var(--cbp-button-padding);
    border-radius: var(--cbp-button-radius);
    cursor: pointer;
    font-size: var(--cbp-button-font-size);
    opacity: var(--cbp-button-opacity);
    transition: opacity .3s ease, background-color .3s ease;
    display: flex;
    align-items: center;
    gap: .4em;
}

.toolbar-button:hover {
    opacity: var(--cbp-button-hover-opacity);
}

.toolbar-button.copied {
    background-color: var(--cbp-button-copied-bg);
}

.toolbar-button svg {
    width: var(--cbp-icon-size);
    height: var(--cbp-icon-size);
    fill: currentColor;
}

.copy-status-message {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}