// =============================================================================
// 31-modules / preview / config (Code/component preview boxes)
// =============================================================================

@use "../../01-core/external" as *;

$preview-config: (
    "border-color": var(--ss-color-line, #cccccc),
    "border-width": q(1),
    "background": var(--ss-color-fill, #ffffff),
    "info-bg": var(--ss-color-surface-muted, #f5f5f5),
    "info-color": var(--ss-color-text-muted, #666666),
    "code-bg": var(--ss-color-code-bg, #1e1e1e),
    "code-color": var(--ss-color-code-foreground, #f4f4f4),
    "padding": q(16),
    "radius": q(2),
    "swatch-size": q(64),

    // Code text
    "code-font-size": q(13),

    // Info bar
    "info-gap": q(8),
    "info-padding-block": q(6),
    "info-font-size": q(11),

    // Horizontal label cell
    "label-cell-padding": q(8) q(12),

    // Swatch chip
    "swatch-gap": q(4),
    "swatch-padding": q(8),
    "swatch-code-font-size": q(12),

    // Copy button
    "copy-bg": #333333,
    "copy-fg": #ffffff,
    "copy-bg-hover": #555555,
    "copy-padding": q(4) q(8),
    "copy-font-size": q(11),
    "copy-radius": q(2),
) !default;