// =Code
pre,
.code {
    // colors
    --code-background-color: var(--palette-neutral-lightest);
    --code-color: var(--text-default);
    --code-border-color: transparent;

    // params
    --code-font-size: var(--type-scale-14);
    --code-font-family: var(--font-mono);
    --code-line-height: 1.5;
    --code-padding: 4rem;
    --code-border-radius: var(--radius-base);
    --code-border-width: 1px;
    --code-border-style: solid;

    // props
    overflow: auto;
    white-space: pre;
    font-family: var(--code-font-family);
    font-size: var(--code-font-size);
    line-height: var(--code-line-height);
    padding: var(--code-padding);
    border-radius: var(--code-border-radius);
    border-width: var(--code-border-width);
    border-style: var(--code-border-style);
    border-color: var(--code-border-color);
    background-color: var(--code-background-color);
    color: var(--code-color);

    code {
        padding: 0;
        border: 0;
        font-size: 100%;
        display: block;
        line-height: inherit;
        background: none;
    }
}
.code-light {
    --code-background-color: var(--palette-white-20);
    --code-color: var(--text-light);
    --code-border-color: transparent;
}
// Dark theme
@include dark-theme {
    pre,
    .code {
        --code-background-color: var(--palette-surface-300);
        --code-border-color: transparent;
    }
}