/* Code — modèle canonique ; son emploi : canon_code.md. */

@layer components {
    .code {
        padding: var(--code-padding, 1px var(--canon-space-1));
    }
    .code-block {
        overflow-x: auto;
        padding: var(--code-block-padding, var(--canon-space-3));
    }

    .code {
        border-radius: var(--code-radius, 3px);
        background-color: var(--code-surface, var(--canon-theme-tint));
    }
    .code-block {
        border-style: solid;
        border-width: var(--code-block-line-width, 0px);
        border-inline-start-width: var(--code-block-line-start, var(--code-block-line-width, 0px));
        border-color: var(--code-block-line, var(--canon-theme-line));
        border-radius: var(--code-block-radius, var(--canon-radius-control));
        background-color: var(--code-block-surface, var(--canon-theme-surface));
    }

    .code,
    .code-block {
        font-family: var(--code-font, ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace);
    }
    .code {
        font-size: var(--code-size, 0.9em);
        color: var(--code-ink, inherit);
    }
    .code-block {
        font-size: var(--code-block-size, var(--canon-size-control));
        line-height: var(--code-block-leading, var(--canon-leading-body));
        white-space: var(--code-block-wrap, pre);
        overflow-wrap: break-word;
        color: var(--code-block-ink, var(--canon-theme-ink));
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer tokens {
    .code-block {
        --code-block-line-width: 0px;
        --code-block-line-start: var(--canon-line-width);
        --code-block-radius: 0px;
    }
}