@use 'sass:map';

$default-datepicker-config: (
    // Layout
    height: 2.5rem,
    padding: 0.375rem 1rem,
    label-gap: 0.5rem,

    // Borders
    border-radius: 0.4375rem,
    border-color: #BDC1C6,
    border-width: 1px,

    // Colors
    bg: #FEFEFE,
    color: #202124,
    placeholder-color: #80868B,

    // Typography
    font-size: 0.875rem,
    font-weight: 400,
    font-family: inherit,

    // Label
    label-font-size: 0.875rem,
    label-font-weight: 500,
    label-color: #202124,

    // States
    focus-border-color: #1A73E8,
    error-color: #D93025,
    disabled-bg: #F1F3F4,
    disabled-color: #80868B,
    required-color: #D93025,

    // Icon
    icon-color: #5F6368
);

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

    // Layout
    --cc-datepicker-height: #{map.get($config, height)};
    --cc-datepicker-padding: #{map.get($config, padding)};
    --cc-datepicker-label-gap: #{map.get($config, label-gap)};

    // Borders
    --cc-datepicker-border-radius: #{map.get($config, border-radius)};
    --cc-datepicker-border-color: #{map.get($config, border-color)};
    --cc-datepicker-border-width: #{map.get($config, border-width)};

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

    // Typography
    --cc-datepicker-font-size: #{map.get($config, font-size)};
    --cc-datepicker-font-weight: #{map.get($config, font-weight)};
    --cc-datepicker-font-family: #{map.get($config, font-family)};

    // Label
    --cc-datepicker-label-font-size: #{map.get($config, label-font-size)};
    --cc-datepicker-label-font-weight: #{map.get($config, label-font-weight)};
    --cc-datepicker-label-color: #{map.get($config, label-color)};

    // States
    --cc-datepicker-focus-border-color: #{map.get($config, focus-border-color)};
    --cc-datepicker-error-color: #{map.get($config, error-color)};
    --cc-datepicker-disabled-bg: #{map.get($config, disabled-bg)};
    --cc-datepicker-disabled-color: #{map.get($config, disabled-color)};
    --cc-datepicker-required-color: #{map.get($config, required-color)};

    // Icon
    --cc-datepicker-icon-color: #{map.get($config, icon-color)};

    // MD3 Overrides or Missing Variables
    --mat-datepicker-calendar-container-background-color: var(--cc-datepicker-bg, #FEFEFE);
    --mat-datepicker-calendar-container-shape: var(--cc-datepicker-border-radius, 0.4375rem);
    --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}