$cx-default-calendar-font-size: $cx-default-box-font-size !default;
$cx-default-calendar-background-color: $cx-default-input-background-color !default;
$cx-default-calendar-border-width: $cx-default-box-border-width !default;
$cx-default-calendar-border-color: $cx-default-input-border-color !default;
$cx-default-calendar-border-radius: $cx-default-border-radius !default;
$cx-default-calendar-box-shadow: none !default;
$cx-default-calendar-padding: 5px !default;

//header
$cx-default-calendar-header-font-size: $cx-default-box-font-size !default;
$cx-default-calendar-header-font-weight: 500 !default;
$cx-default-calendar-header-color: $cx-default-color !default;
$cx-default-calendar-header-background-color: transparent !default;

//day
$cx-default-calendar-day-font-size: $cx-default-calendar-font-size !default;
$cx-default-calendar-day-border-radius: $cx-default-calendar-border-radius !default;

// CALENDAR
$cx-calendar-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
  default: (
    font-size: $cx-default-calendar-font-size,
    background-color: $cx-default-calendar-background-color,
    border-style: solid,
    border-width: $cx-default-calendar-border-width,
    border-color: $cx-default-calendar-border-color,
    border-radius: $cx-default-calendar-border-radius,
    box-shadow: $cx-default-calendar-box-shadow,
    padding: $cx-default-calendar-padding
  ),
  hover: (
    
  ),
  header: (
    font-size: $cx-default-calendar-header-font-size,
    font-weight: $cx-default-calendar-header-font-weight,
    color: $cx-default-calendar-header-color,
    background-color: $cx-default-calendar-header-background-color, 
  ),
  focus: (
    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow),
    outline: none
  )
)) !default;

// calendar day field styles
$cx-calendar-day-state-style-map: cx-deep-map-merge($cx-list-item, (
  default: (
    font-size: $cx-default-calendar-day-font-size,
    background-color: transparent,
    border-radius: $cx-default-calendar-day-border-radius
  ),
  today: (
    background-color: rgba(220, 250, 183, 0.5),
  ),
  outside: (
    color: rgba(0, 0, 0, 0.3)
  ), 
  today-hover: (
      
  )
));