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

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

$preview-config: (
    "border-color": var(--ss-color-line),
    "border-width": q(1),
    "background": var(--ss-color-fill),
    "info-bg": var(--ss-color-surface-muted),
    "info-color": var(--ss-color-text-muted),
    "code-bg": var(--ss-color-code-bg),
    "code-color": var(--ss-color-code-foreground),
    "padding": q(16),
    "radius": var(--ss-radius-sm),
    "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": var(--ss-font-size-xs),

    // Copy button
    "copy-bg": var(--ss-color-gray-700),
    "copy-fg": var(--ss-color-white),
    "copy-bg-hover": var(--ss-color-gray-600),
    "copy-padding": q(4) q(8),
    "copy-font-size": q(11),
    "copy-radius": var(--ss-radius-sm),
) !default;