@use "./base";

// ====== date-picker ======

// DatePicker cells
// including date/month/year cells

// cells - Border radius
$date-picker-cell-border-radius-s: base.$border-radius-medium !default;
$date-picker-cell-border-radius-m: base.$border-radius-medium !default;
$date-picker-cell-border-radius-range-start: base.$border-radius-medium 0 0 base.$border-radius-medium !default;
$date-picker-cell-border-radius-range-end: 0 base.$border-radius-medium base.$border-radius-medium 0 !default;

// cells - font colors
$date-picker-cell-font-color: base.$color-text-normal !default;
$date-picker-cell-font-color-current: base.color-gray(1) !default;
$date-picker-cell-font-color-outside: base.color-gray(7) !default;

$date-picker-cell-font-color-disabled: base.color-gray(6) !default;
$date-picker-cell-font-color-selected: base.color-gray(1) !default;

// cells background colors
$date-picker-cell-bg-color: base.color-gray(1) !default;
$date-picker-cell-bg-color-hover: base.color-gray(3) !default;
$date-picker-cell-bg-color-active: base.color-gray(4) !default;
$date-picker-cell-bg-color-disabled: base.color-gray(2) !default;

$date-picker-cell-bg-color-selected: base.color-brand() !default;
$date-picker-cell-bg-color-selected-hover: base.color-brand(5) !default;
$date-picker-cell-bg-color-selected-active: base.color-brand(7) !default;

// DatePicker panel
$date-picker-panel-shadow: base.$box-shadow-base !default;

$date-picker-panel-border-radius-s: base.$border-radius-medium !default;
$date-picker-panel-border-radius-m: base.$border-radius-medium !default;

// @todo:task 与调色板匹配
// 月份面板中的年选择侧边区域
$date-picker-year-panel-bg-color-selected: base.color-brand(1) !default;
$date-picker-year-panel-font-color-selected: base.color-brand() !default;
$date-picker-year-panel-font-color: base.$color-text-normal !default;

// 标题区域
$date-picker-title-icon-color: base.$color-icon-normal !default;

// today 的样式
$date-picker-today-text-normal: base.color-brand(6) !default;
$date-picker-today-text-selected: base.color-gray(1) !default;
$date-picker-today-text-disabled: base.$color-text-disabled !default;
$date-picker-today-text-color-outside-month: base.color-gray(7) !default;

$date-picker-today-indicator-color-normal: base.color-brand() !default;
$date-picker-today-indicator-color-selected: base.color-gray(1) !default;
$date-picker-today-indicator-color-selected-inside: $date-picker-today-indicator-color-normal;
$date-picker-today-indicator-color-selected-disabled: base.$color-text-disabled !default;
$date-picker-today-indicator-color-disabled: base.color-gray(7) !default;
$date-picker-today-indicator-color-outside-month: $date-picker-today-text-color-outside-month;

// zoom 之后的左侧年份
$date-picker-zoomed-aside-width: base.height(20) !default;
// @note: 下述的的 270px & 310px 为设计稿给定, 无法符合 4n 原则, 故不写为 base.height(N) 形式
$date-picker-zoomed-aside-height-list: (
        sm: 244px,
        md: 270px,
) !default;

// 快速操作栏
$date-picker-quick-actions-height-list: (
        sm: 281px,
        md: 310px,
) !default;

$date-picker-quick-actions-single-item-height-list: (
        sm: 28px,
        md: 32px,
) !default;

// panel 年份部分的 内容 margins
$date-picker-month-inner-content-margin-list: (
        sm: 22px base.padding(3) 38px,
        md: base.padding(8) base.padding(3) 38px,
) !default;

$date-picker-quarter-inner-content-margin-list: (
        sm: 30px base.padding(19) 30px,
        md: base.padding(8) base.padding(21) base.padding(8),
) !default;

// 不同尺寸的控制
$date-picker-size-list: (
        sm,
        md,
) !default;

$date-picker-item-font-size-list: (
        sm: 12px,
        md: 14px,
) !default;

$date-picker-item-line-height-list: (
        sm: base.line-height-regular(12),
        md: base.line-height-regular(14),
) !default;

$date-picker-normal-item-size-list: (
        sm: 28px,
        md: 32px,
) !default;

$date-picker-month-and-quarter-item-width-list: (
        sm: 44px,
        md: 56px,
) !default;

$date-picker-month-item-gap-list: (
        sm: 20px,
        md: 16px,
) !default;

$date-picker-week-row-height-list: (
        sm: 20px,
        md: 22px,
) !default;

$date-picker-title-height-list: (
        sm: 36px,
        md: 38px,
) !default;


// @note: 这个是比较特殊的, 用于解决 zoom icon 垂直对齐问题的参数
$date-picker-zoom-icon-line-height-adjustment-list: (
        sm: 3px,
        md: 4px,
) !default;

$range-picker-separator-width: (
  xs: 12px,
  sm: 12px,
  md: 14px,
  lg: 16px,
) !default;