@import "../global.less";

// Width
// FIXME: choose a more appropriate defalt value
@veui-date-picker-width: @veui-height-unit * 41;
@veui-date-picker-width-range: @veui-height-unit * 63;
@veui-date-picker-width-month-button: @veui-height-unit * 14;
@veui-date-picker-width-month-button-s: @veui-height-unit * 11;

@veui-date-picker-input-height: @veui-height-unit * 8;
@veui-date-picker-input-height-s: @veui-height-unit * 7;
@veui-date-picker-overlay-input-shadow-focus: 0 1px 0 @veui-shadow-color-focus;

// See Input for other input styles

/**
 * DatePicker Dropdown
 *  only has small and middle size
 */

/* Font size */
@veui-date-picker-font-size-s: @veui-font-size-s;
@veui-date-picker-font-size-m: @veui-font-size-m;

/* Background color */
@veui-date-picker-dropdown-background-color: @veui-background-color-normal;

/* Radius */
@veui-date-picker-dropdown-border-radius-s: @veui-border-radius-s;
@veui-date-picker-dropdown-border-radius-m: @veui-border-radius-m;

/* Shadow */
@veui-date-picker-dropdown-shadow: @veui-shadow;

/**
 * DatePicker input
 */

/* Icon color */
@veui-date-picker-icon-color: @veui-input-icon-color;
@veui-date-picker-icon-color-disabled: @veui-input-icon-color-disabled;
@veui-date-picker-icon-color-clear: @veui-color-gray-6;

/* Spacing */
@veui-date-picker-range-panel-spacing: @veui-spacing-unit * 2;


/**
 * DatePicker panel
 */

@veui-date-picker-panel-separator-color: @veui-separator-color-normal;
@veui-date-picker-panel-padding-x: @veui-padding-unit * 2;
@veui-date-picker-panel-padding-x-unit: @veui-padding-unit;

/**
 * DatePicker header
 *  select year / month
 */

/* Icon sizes */
@veui-date-picker-header-pagination-icon-size: @veui-icon-size-minor;
@veui-date-picker-header-icon-size-aux: @veui-icon-size-aux; // expand/collapse

/* Padding & spacing */
@veui-date-picker-header-padding-y: @veui-padding-unit * 2;
@veui-date-picker-header-pagination-spacing: @veui-padding-unit * 3; // between pagination icons
@veui-date-picker-header-icon-aux-spacing: @veui-padding-unit * 2; // between label & toggle icon

/**
 * DatePicker body,
 * including weekdays, day/month/year body
 */
@veui-date-picker-day-body-padding-top: @veui-padding-unit;
@veui-date-picker-day-body-padding-bottom: @veui-padding-unit * 3;
@veui-date-picker-weekdays-spacing-after: @veui-padding-unit * 3;
@veui-date-picker-month-body-padding-top: @veui-padding-unit * 6;
@veui-date-picker-year-body-padding-top: @veui-padding-unit * 6;

/**
 * DatePicker cells,
 * including date/month/year cells
 */

/* Sizes */
@veui-date-picker-cell-height-s: @veui-height-s;
@veui-date-picker-cell-height-m: @veui-height-m;
@veui-date-picker-cell-width-s: @veui-date-picker-cell-height-s;
@veui-date-picker-cell-width-m: @veui-date-picker-cell-height-m;

/* Border radii */
@veui-date-picker-cell-border-radius: @veui-border-radius-l;

/* Focus rings */
@veui-date-picker-cell-shadow-focus: @veui-shadow-focus;

/* Font colors */
@veui-date-picker-cell-font-color: @veui-font-color-normal;
@veui-date-picker-cell-font-color-current: @veui-color-brand-6; // Today / current month
@veui-date-picker-cell-font-color-aux: @veui-font-color-weak;
@veui-date-picker-cell-font-color-disabled: @veui-font-color-disabled;
@veui-date-picker-cell-font-color-selected: @veui-color-gray-1;
@veui-date-picker-cell-font-color-range-active: @veui-color-brand-6;

/* Font weights */
@veui-date-picker-cell-font-weight: @veui-font-weight-1;
@veui-date-picker-cell-font-weight-selected: @veui-font-weight-2;

/* Spacing, except for start and end */
// day
@veui-date-picker-day-cell-spacing-y: @veui-spacing-unit * 1;
@veui-date-picker-day-cell-spacing-x: @veui-spacing-unit * 2;

// month
@veui-date-picker-month-cell-spacing-y: @veui-spacing-unit * 5;
@veui-date-picker-month-cell-padding-x: @veui-spacing-unit * 2;

// year
@veui-date-picker-year-cell-spacing-y: @veui-spacing-unit* 5;
@veui-date-picker-year-cell-padding-x: @veui-spacing-unit * 2;

/* Background */
// default & in-range
@veui-date-picker-cell-background-color: @veui-background-color-normal;
@veui-date-picker-cell-background-color-focus: @veui-color-brand-1;
@veui-date-picker-cell-background-color-disabled: @veui-background-color-disabled;
@veui-date-picker-cell-background-color-hover: @veui-color-brand-1;
@veui-date-picker-cell-background-color-active: @veui-color-brand-2;
@veui-date-picker-cell-background-color-range-active: @veui-color-brand-3;

// current-point
@veui-date-picker-cell-current-point-bottom: @veui-spacing-unit - 1px;
@veui-date-picker-cell-current-point-color: @veui-color-brand-6;
@veui-date-picker-cell-current-point-color-hover: @veui-color-brand-6;
@veui-date-picker-cell-current-point-color-focus: @veui-color-brand-6;
@veui-date-picker-cell-current-point-color-active: @veui-background-color-normal;
@veui-date-picker-cell-current-point-color-selected: @veui-background-color-normal;
@veui-date-picker-cell-current-point-color-disabled: @veui-color-gray-6;
@veui-date-picker-cell-current-point-color-aux: @veui-color-gray-7;

// selected
@veui-date-picker-cell-background-color-selected: @veui-color-brand-6;
@veui-date-picker-cell-background-color-selected-hover: @veui-color-brand-5;
@veui-date-picker-cell-background-color-selected-focus: @veui-color-brand-5;
@veui-date-picker-cell-background-color-selected-active: @veui-color-brand-7;

// aux
@veui-date-picker-cell-background-color-aux: @veui-date-picker-cell-background-color;
@veui-date-picker-cell-background-color-aux-hover: @veui-background-color-normal-hover;
@veui-date-picker-cell-background-color-aux-focus: @veui-background-color-normal-hover;
@veui-date-picker-cell-background-color-aux-active: @veui-background-color-normal-active;

// end of a range during selection
@veui-date-picker-cell-background-color-range-end-hover: @veui-date-picker-cell-background-color-hover;
@veui-date-picker-cell-background-color-range-end-focus: @veui-date-picker-cell-background-color-active;

/* Border color */
@veui-date-picker-cell-border-color: transparent;
@veui-date-picker-cell-border-focus-color: @veui-border-color-focus;

// end of a range during selection
@veui-date-picker-cell-border-color-range-end-hover: @veui-color-brand-6;
@veui-date-picker-cell-border-color-range-end-active: @veui-color-brand-6;

/**
 * List: year scroller & shortcut list
 */

@veui-date-picker-list-item-height-m: @veui-height-m;
@veui-date-picker-list-item-height-s: @veui-height-s;

@veui-date-picker-list-padding-y: @veui-padding-unit * 2;
@veui-date-picker-list-item-spacing: @veui-spacing-unit * 1;
@veui-date-picker-list-item-padding-x: @veui-padding-unit * 4;

@veui-date-picker-list-background-color: @veui-background-color-normal;
@veui-date-picker-list-background-color-focus: @veui-background-color-normal-focus;
@veui-date-picker-list-background-color-hover: @veui-background-color-normal-hover;
@veui-date-picker-list-background-color-active: @veui-background-color-normal-active;
@veui-date-picker-list-background-color-selected: @veui-color-brand-1;

@veui-date-picker-list-font-color: @veui-font-color-normal;
@veui-date-picker-list-font-color-focus: @veui-font-color-aux;
@veui-date-picker-list-font-color-hover: @veui-font-color-aux;
@veui-date-picker-list-font-color-active: @veui-font-color-strong;

@veui-date-picker-list-font-color-selected: @veui-color-brand-6;
@veui-date-picker-list-font-color-selected-focus: @veui-color-brand-5;
@veui-date-picker-list-font-color-selected-hover: @veui-color-brand-5;
@veui-date-picker-list-font-color-selected-active: @veui-color-brand-7;

@veui-date-picker-list-font-weight: @veui-font-weight-1;
@veui-date-picker-list-font-weight-selected: @veui-font-weight-2;

/**
 * Year scroller
 */

@veui-date-picker-year-scroller-width: 80px;