@use 'sass:map';

$default-input-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 input-theme($user-config: ()) {
    $config: map.merge($default-input-config, $user-config);

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

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

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

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

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

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

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