@use 'sass:map';

// Default configuration for the configurable form theme
$default-configurable-form-config: (
    // Colors
    primary-color: #3B82F6,
    surface-background: #ffffff,
    border-color: #D1D5DB,
    text-primary: #111827,
    text-secondary: #6B7280,
    error-color: #DC2626,
    disabled-background: #F3F4F6,
    hover-background: #F9FAFB,

    // Inputs specific
    input-border-color: #D1D5DB,
    input-focus-border-color: #3B82F6,
    input-hover-border-color: #9CA3AF,
    input-bg: #ffffff,

    // Dimensions
    section-radius: 12px,
    section-padding: 2rem,
    section-spacing: 1.5rem,
    input-radius: 8px,
    input-padding-y: 0.625rem,
    input-padding-x: 0.875rem,

    // Typography
    font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif),
    section-title-size: 1.25rem,
    section-title-weight: 600,
    label-size: 0.875rem,
    label-weight: 600,
    input-font-size: 0.875rem,
    hint-size: 0.75rem,

    // Shadows
    section-shadow: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)),
);

// Mixin to generate CSS variables for the configurable form component
@mixin configurable-form-theme($user-config: ()) {
    // Merge user config with defaults
    $config: map.merge($default-configurable-form-config, $user-config);

    // Generate CSS Variables
    --cf-primary-color: #{map.get($config, primary-color)};
    --cf-surface-background: #{map.get($config, surface-background)};
    --cf-border-color: #{map.get($config, border-color)};
    --cf-text-primary: #{map.get($config, text-primary)};
    --cf-text-secondary: #{map.get($config, text-secondary)};
    --cf-error-color: #{map.get($config, error-color)};
    --cf-disabled-background: #{map.get($config, disabled-background)};
    --cf-hover-background: #{map.get($config, hover-background)};

    --cf-input-border-color: #{map.get($config, input-border-color)};
    --cf-input-focus-border-color: #{map.get($config, input-focus-border-color)};
    --cf-input-hover-border-color: #{map.get($config, input-hover-border-color)};
    --cf-input-bg: #{map.get($config, input-bg)};

    --cf-section-radius: #{map.get($config, section-radius)};
    --cf-section-padding: #{map.get($config, section-padding)};
    --cf-section-spacing: #{map.get($config, section-spacing)};
    --cf-input-radius: #{map.get($config, input-radius)};
    --cf-input-padding-y: #{map.get($config, input-padding-y)};
    --cf-input-padding-x: #{map.get($config, input-padding-x)};

    --cf-font-family: #{map.get($config, font-family)};
    --cf-section-title-size: #{map.get($config, section-title-size)};
    --cf-section-title-weight: #{map.get($config, section-title-weight)};
    --cf-label-size: #{map.get($config, label-size)};
    --cf-label-weight: #{map.get($config, label-weight)};
    --cf-input-font-size: #{map.get($config, input-font-size)};
    --cf-hint-size: #{map.get($config, hint-size)};

    --cf-section-shadow: #{map.get($config, section-shadow)};
}