@use 'sass:map';

$default-alert-config: (
    font-family: ('Roboto', sans-serif),

    // Structure (Default values in rem, assuming 16px root)
    padding: 1rem 2rem,
    // 16px 32px
    radius: 0.75rem,
    // 12px
    gap: 1rem,
    // 16px

    // Icon
    icon-size: 1.25rem,
    // 20px
    icon-margin-top: 0.125rem,
    // 2px

    // Text
    title-size: 1rem,
    // 16px
    title-line-height: 1.5rem,
    // 24px
    message-size: 0.875rem,
    // 14px

    // Info
    info-bg: #F1F3F4,
    info-color: #3C4043,

    // Warning
    warning-bg: #F9C80E1F,
    warning-color: #3C4043,
    // Default text color for warning usually dark
    warning-title-color: #3C4043,
    // Making title dark for better contrast with light yellow bg
    warning-shadow: none,
    // Removing shadow as per clean flat design, or keeping if specified. User said "warning-shadow" variant exists.

    // Success
    success-bg: #E6F4EA,
    // Light green similar to Info/Error pattern
    success-color: #16A34A,

    // Error
    error-bg: #FCE8E6,
    // Light red
    error-color: #D93025
);

@mixin alert-theme($user-config: ()) {
    $config: map.merge($default-alert-config, $user-config);

    --cc-alert-font-family: #{map.get($config, font-family)};

    // Structure
    --cc-alert-padding: #{map.get($config, padding)};
    --cc-alert-radius: #{map.get($config, radius)};
    --cc-alert-gap: #{map.get($config, gap)};

    // Icon
    --cc-alert-icon-size: #{map.get($config, icon-size)};
    --cc-alert-icon-margin-top: #{map.get($config, icon-margin-top)};

    // Text
    --cc-alert-title-size: #{map.get($config, title-size)};
    --cc-alert-title-line-height: #{map.get($config, title-line-height)};
    --cc-alert-message-size: #{map.get($config, message-size)};

    // Colors
    --cc-alert-info-bg: #{map.get($config, info-bg)};
    --cc-alert-info-color: #{map.get($config, info-color)};

    --cc-alert-warning-bg: #{map.get($config, warning-bg)};
    --cc-alert-warning-color: #{map.get($config, warning-color)};
    --cc-alert-warning-title-color: #{map.get($config, warning-title-color)};
    --cc-alert-warning-shadow: #{map.get($config, warning-shadow)};
    --cc-alert-success-bg: #{map.get($config, success-bg)};
    --cc-alert-success-color: #{map.get($config, success-color)};

    --cc-alert-error-bg: #{map.get($config, error-bg)};
    --cc-alert-error-color: #{map.get($config, error-color)};
    --cc-alert-warning-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25); // 0px 4px 4px
}