/* ===== Code Block Wrapper + Copy Button =====
   Wird von oo.codeBlock.init() dynamisch erzeugt.
   ============================================= */

/* ── highlight.js Theme-Overrides ───────────────
   atom-one-light.min.css setzt background, padding und display
   auf .hljs – hier auf unsere Design-Tokens zurücksetzen.      */
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 0!important;
    background: transparent;
}
code.hljs {
    padding: 0!important;
    background: transparent;
}
.hljs {
    background: transparent;
}

.oo-code-block-wrapper {
    position: relative;
    max-width: 100%;
}

/* Copy-Button: absolut oben rechts über dem Code-Block */
.oo-code-block-wrapper .oo-copy-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--oo-radius-sm, 4px);
    background: transparent;
    color: var(--oo-color-text-subtle);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
}

/* Button erst bei Hover auf den Wrapper sichtbar */
.oo-code-block-wrapper:hover .oo-copy-btn {
    opacity: 1;
}

.oo-code-block-wrapper .oo-copy-btn:hover {
    background: var(--oo-surface-2, rgba(0, 0, 0, 0.06));
    border-color: var(--oo-color-border);
    color: var(--oo-color-text);
}

.oo-code-block-wrapper .oo-copy-btn:active {
    filter: brightness(0.95);
}

/* Erfolgs-Zustand (nach dem Kopieren) */
.oo-code-block-wrapper .oo-copy-btn--success {
    opacity: 1;
    color: var(--oo-success);
}

/* Icon innerhalb des Buttons */
.oo-code-block-wrapper .oo-copy-btn .oo-icon {
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
}

/* Mit Tastaturfokus ebenfalls sichtbar. */
.oo-code-block-wrapper .oo-copy-btn:focus-visible {
    opacity: 1;
}

/* Ohne Überfahren (Touch) immer sichtbar und groß genug für den Finger (rund 40 px statt 27 px). Mit dem Hintergrund
   des Blocks, weil der Code sonst sichtbar unter dem Knopf durchläuft. */
@media (hover: none) {
    .oo-code-block-wrapper .oo-copy-btn {
        opacity: 1;
        padding: 0.6rem;
        background: var(--oo-surface-2, #f3f4f6);
    }
}