/* Code blocks marked btg-code: a dark panel with a header (label, copy),
   line numbers and highlighting (btg-code-blocks.js). Without the script
   it is still a dark, scrollable panel. */

.wp-block-code.btg-code {
    --btg-code-bg: #16181d;
    --btg-code-bar: #1f2228;
    --btg-code-text: #d7dae0;
    --btg-code-dim: #6b7280;
    --btg-code-line: #4b5160;
    --btg-code-string: #a5d6a7;
    --btg-code-number: #f6c177;
    --btg-code-keyword: #c792ea;
    --btg-code-builtin: #82aaff;
    --btg-code-section: #f78c6c;
    position: relative;
    margin: 2rem 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: var(--btg-code-bg);
    color: var(--btg-code-text);
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.8rem;
    line-height: 1.65;
}

.wp-block-code.btg-code > code {
    display: block;
    padding: 1rem 1.25rem 1.25rem;
    overflow-x: auto;
    background: none;
    color: inherit;
    font: inherit;
    white-space: pre;
    tab-size: 4;
}

.btg-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    background: var(--btg-code-bar);
    font-family: inherit;
    font-size: 0.72rem;
    color: var(--btg-code-dim);
}

.btg-code__copy,
.btg-code__copy:hover,
.btg-code__copy:focus,
.btg-code__copy:active {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--btg-code-line);
    border-radius: 4px;
    background: transparent;
    color: var(--btg-code-text);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.btg-code__copy:hover,
.btg-code__copy:focus-visible {
    border-color: var(--btg-code-text);
}

.btg-code__copy:focus-visible {
    outline: 1px solid var(--btg-code-text);
    outline-offset: 2px;
}

/* Lines and numbers */

.btg-code.has-lines > code {
    padding-left: 0;
    counter-reset: btg-code-line;
}

.btg-code__line {
    display: block;
    min-height: 1.65em;
}

.btg-code__line::before {
    content: counter(btg-code-line);
    counter-increment: btg-code-line;
    display: inline-block;
    width: 3.25em;
    margin-right: 1.25em;
    padding-right: 0.75em;
    text-align: right;
    color: var(--btg-code-line);
    border-right: 1px solid #2a2e36;
    user-select: none;
}

/* Tokens */

.btg-code .tok-string { color: var(--btg-code-string); }
.btg-code .tok-number { color: var(--btg-code-number); }
.btg-code .tok-keyword { color: var(--btg-code-keyword); }
.btg-code .tok-builtin { color: var(--btg-code-builtin); }
.btg-code .tok-comment,
.btg-code .tok-meta { color: var(--btg-code-dim); }
.btg-code .tok-section { color: var(--btg-code-section); }

@media (max-width: 600px) {
    .wp-block-code.btg-code {
        width: calc(100% + 40px);
        max-width: none;
        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0;
        font-size: 0.72rem;
    }

    .btg-code__line::before {
        width: 2.25em;
        margin-right: 0.9em;
    }
}