@use 'sass:map';

$default-confirmation-modal-config: (
    bg: #FFFFFF,
    radius: 0.75rem,
    // 12px
    shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.15),
    // 0 4px 24px
    border: none,

    // Header
    header-padding: 0.5rem 1rem,
    // 24px
    header-border-bottom: 0.0625rem solid #E5E7EB,
    // 1px
    title-font-size: 0.875rem,
    // 20px
    title-font-weight: 600,
    title-color: #111827,
    icon-size: 1.5rem,
    // 24px
    close-icon-size: 1.25rem,
    // 20px

    // Body
    body-padding: 1.5rem,
    // 24px
    body-text-color: #374151,

    // Inputs (Defaults)
    input-padding: 0.625rem 0.75rem,
    // 10px 12px
    input-radius: 0.375rem,
    // 6px
    input-font-size: 0.875rem,
    // 14px
    label-margin-bottom: 0.5rem,
    // 8px
    textarea-min-height: 6.25rem,
    // 100px

    // Footer
    footer-bg: #F9FAFB,
    footer-padding: 1rem 1.5rem,
    // 24px
    footer-border-top: 0.0625rem solid #E5E7EB,
    // 1px

    // Spinner
    spinner-size: 1rem // 16px
);

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

    --cc-modal-bg: #{map.get($config, bg)};
    --cc-modal-radius: #{map.get($config, radius)};
    --cc-modal-shadow: #{map.get($config, shadow)};
    --cc-modal-border: #{map.get($config, border)};

    // Header Themes
    --cc-modal-header-bg-dark: #262125;
    --cc-modal-header-title-color-dark: #FFFFFF;

    --cc-modal-header-padding: #{map.get($config, header-padding)};
    --cc-modal-header-border-bottom: #{map.get($config, header-border-bottom)};
    --cc-modal-title-size: #{map.get($config, title-font-size)};
    --cc-modal-title-weight: #{map.get($config, title-font-weight)};
    --cc-modal-title-color: #{map.get($config, title-color)};
    --cc-modal-icon-size: #{map.get($config, icon-size)};
    --cc-modal-close-icon-size: #{map.get($config, close-icon-size)};

    --cc-modal-body-padding: #{map.get($config, body-padding)};
    --cc-modal-body-color: #{map.get($config, body-text-color)};

    --cc-modal-input-padding: #{map.get($config, input-padding)};
    --cc-modal-input-radius: #{map.get($config, input-radius)};
    --cc-modal-input-font-size: #{map.get($config, input-font-size)};
    --cc-modal-label-margin-bottom: #{map.get($config, label-margin-bottom)};
    --cc-modal-textarea-min-height: #{map.get($config, textarea-min-height)};

    --cc-modal-footer-bg: #{map.get($config, footer-bg)};
    --cc-modal-footer-padding: #{map.get($config, footer-padding)};
    --cc-modal-footer-border-top: #{map.get($config, footer-border-top)};

    --cc-modal-spinner-size: #{map.get($config, spinner-size)};
}