@use 'sass:map';

$default-timepicker-config: (
  // Trigger field (mirrors datepicker defaults)
  height:              2.5rem,
  padding:             0.375rem 1rem,
  label-gap:           0.5rem,
  border-radius:       0.4375rem,
  border-color:        #BDC1C6,
  border-width:        1px,
  bg:                  #FEFEFE,
  color:               #202124,
  placeholder-color:   #80868B,
  font-size:           0.875rem,
  font-weight:         400,
  font-family:         inherit,
  label-font-size:     0.875rem,
  label-font-weight:   500,
  label-color:         #202124,
  focus-border-color:  #1A73E8,
  error-color:         #D93025,
  disabled-bg:         #F1F3F4,
  disabled-color:      #80868B,
  required-color:      #D93025,
  icon-color:          #5F6368,

  // Wheel panel (popup) — greyscale/black is the default theme.
  // Opt into a blue accent by passing these overrides to time-picker-theme():
  //   accent: #4D89EB, accent-light: rgba(77,137,235,0.08),
  //   accent-border: rgba(77,137,235,0.15), btn-confirm-bg: #4D89EB,
  //   btn-confirm-hover: #3b74d1
  accent:              #111827,
  accent-light:        rgba(0, 0, 0, 0.05),
  accent-border:       rgba(0, 0, 0, 0.08),
  item-height:         36px,
  item-font-size:      1rem,
  text-muted:          #9CA3AF,
  text-primary:        #111827,
  wheels-border:       transparent,
  btn-confirm-bg:      #111827,
  btn-confirm-hover:   #000000,
  btn-cancel-bg:       #F3F4F6,
  btn-cancel-hover:    #E5E7EB,
  btn-cancel-border:   #F3F4F6,
);

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

  // Trigger field tokens
  --cc-timepicker-height:             #{map.get($config, height)};
  --cc-timepicker-padding:            #{map.get($config, padding)};
  --cc-timepicker-label-gap:          #{map.get($config, label-gap)};
  --cc-timepicker-border-radius:      #{map.get($config, border-radius)};
  --cc-timepicker-border-color:       #{map.get($config, border-color)};
  --cc-timepicker-border-width:       #{map.get($config, border-width)};
  --cc-timepicker-bg:                 #{map.get($config, bg)};
  --cc-timepicker-color:              #{map.get($config, color)};
  --cc-timepicker-placeholder-color:  #{map.get($config, placeholder-color)};
  --cc-timepicker-font-size:          #{map.get($config, font-size)};
  --cc-timepicker-font-weight:        #{map.get($config, font-weight)};
  --cc-timepicker-font-family:        #{map.get($config, font-family)};
  --cc-timepicker-label-font-size:    #{map.get($config, label-font-size)};
  --cc-timepicker-label-font-weight:  #{map.get($config, label-font-weight)};
  --cc-timepicker-label-color:        #{map.get($config, label-color)};
  --cc-timepicker-focus-border-color: #{map.get($config, focus-border-color)};
  --cc-timepicker-error-color:        #{map.get($config, error-color)};
  --cc-timepicker-disabled-bg:        #{map.get($config, disabled-bg)};
  --cc-timepicker-disabled-color:     #{map.get($config, disabled-color)};
  --cc-timepicker-required-color:     #{map.get($config, required-color)};
  --cc-timepicker-icon-color:         #{map.get($config, icon-color)};

  // Wheel panel tokens
  --cc-timepicker-accent:             #{map.get($config, accent)};
  --cc-timepicker-accent-light:       #{map.get($config, accent-light)};
  --cc-timepicker-accent-border:      #{map.get($config, accent-border)};
  --cc-timepicker-item-height:        #{map.get($config, item-height)};
  --cc-timepicker-item-font-size:     #{map.get($config, item-font-size)};
  --cc-timepicker-text-muted:         #{map.get($config, text-muted)};
  --cc-timepicker-text-primary:       #{map.get($config, text-primary)};
  --cc-timepicker-wheels-border:      #{map.get($config, wheels-border)};
  --cc-timepicker-btn-confirm-bg:     #{map.get($config, btn-confirm-bg)};
  --cc-timepicker-btn-confirm-hover:  #{map.get($config, btn-confirm-hover)};
  --cc-timepicker-btn-cancel-bg:      #{map.get($config, btn-cancel-bg)};
  --cc-timepicker-btn-cancel-hover:   #{map.get($config, btn-cancel-hover)};
  --cc-timepicker-btn-cancel-border:  #{map.get($config, btn-cancel-border)};
}