/* CodeBlock — molecule. Spec: component-specs/code-block.md
 * Expects Shiki-prebaked innards (dual theme, keepBackground:false). */

.code-block {
    position: relative;
    margin: 0;
    border-radius: 8px;
    background: var(--stone-875);
    overflow: hidden;
}

[data-theme='light'] .code-block {
    background: var(--stone-150);
}

/* No strokes anywhere on the block: the background is the only boundary. */
.code-block-header {
    display: flex;
    align-items: center;
    padding: 8px 12px 0;
}

.code-block-language {
    font-family: var(--font-family-label-mono);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.code-block pre {
    margin: 0;
    padding: 0;
    padding-block: 16px;
    overflow-x: auto;
    background: transparent;
    border: none;
    border-radius: 0;
}

.code-block pre code {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
}

.code-block [data-line] {
    padding-inline: 16px 64px;
}

.code-block [data-highlighted-line] {
    background: #30302e;
}

[data-theme='light'] .code-block [data-highlighted-line] {
    background: #e0e0d9;
}

/* Dual-theme Shiki token selection; dark is the default theme. */
.code-block code[data-theme*=' '] span {
    color: var(--shiki-dark);
}

[data-theme='light'] .code-block code[data-theme*=' '] span {
    color: var(--shiki-light);
}

/* Copy button. */
.code-block-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    height: 24px;
    padding-inline: 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--stone-875);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    opacity: 0;
    transition:
        opacity 0.25s,
        background-color 0.1s;
}

[data-theme='light'] .code-block-copy {
    background: var(--stone-150);
}

@media (any-hover: hover) {
    .code-block-copy:hover {
        background: var(--stone-850);
    }
}

.code-block-copy:active {
    background: var(--stone-850);
}

[data-theme='light'] .code-block-copy:hover,
[data-theme='light'] .code-block-copy:active {
    background: var(--stone-150);
}

.code-block:hover .code-block-copy,
.code-block:focus-within .code-block-copy,
.code-block-copy[data-copied] {
    opacity: 1;
}

@media (hover: none) {
    .code-block-copy {
        opacity: 1;
    }
}