/*
 * Make the PyScript py-editor shadow-DOM slot look like a Sphinx code block.
 *
 * The outer .highlight.highlight-python div is already styled by your theme.
 * These rules target the web-component internals that PyScript exposes.
 */

/* Match the min-height to a reasonable number of visible lines */
py-editor {
    display: block;
    min-height: 6em;
}

/*
 * PyScript 2024+ exposes a --py-editor-* set of custom properties.
 * Mirror the values your Sphinx theme uses for <pre> blocks.
 */
py-editor {
    --py-editor-font-family: var(
        --code-font-family,
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace
    );
    --py-editor-font-size: var(--code-font-size, 0.875em);
    --py-editor-background: var(
        --code-background,
        var(--color-code-background, #f8f8f8)
    );
    --py-editor-foreground: var(
        --code-foreground,
        var(--color-foreground, #333)
    );
}

/*
 * Remove PyScript's own border/shadow so the outer Sphinx .highlight
 * border is the only one visible.
 */
py-editor::part(editor) {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0.5em 1em;
}

/* Run button: border-radius only; margin-top is injected into shadow DOM via JS */
py-editor::part(run-button) {
    border-radius: 0 0 4px 0;
}

/*
 * Differentiate PyScript output from the yellow-green (#eeffcc) code blocks.
 * Uses a light blue-gray background, vertical spacing, and an "Output:" label.
 */
.py-editor-output {
    margin-top: 0.75em;
    background: #f0f4f8;
    font-size: 0.875em;
    padding: 0.75em 1em;
    border-radius: 0 0 4px 4px;
}

.py-editor-output::before {
    content: "Output:";
    display: block;
    font-size: 0.75em;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.35em;
    font-family: sans-serif;
}

/* Cells with :target: render output into a separate div (e.g. plots),
 * so suppress the "Output:" label and custom background on their
 * default .py-editor-output area. */
.has-target .py-editor-output::before {
    display: none;
}

.has-target .py-editor-output {
    background: transparent;
    padding: 0;
    margin-top: 0;
}