@import '../../style/themes/token.less';

@date-picker-custom-prefix: ~'--@{kd-prefix}-c-date-picker';

// color
@date-color-background-checked: var(~'@{date-picker-custom-prefix}-color-background-checked', @color-theme);
@date-wrapper-color-background: var(~'@{date-picker-custom-prefix}-wrapper-color-background', @color-background);
@date-input-color: var(~'@{date-picker-custom-prefix}-input-color', @color-text-primary);
@date-input-color-placeholder: var(~'@{date-picker-custom-prefix}-input-color-placeholder', #f2f2f2);
@date-input-underline-color: var(~'@{date-picker-custom-prefix}-input-underline-color', #999);
@date-input-color-border: var(~'@{date-picker-custom-prefix}-input-color-border', @color-border-strong);
@date-input-color-disabled: var(~'@{date-picker-custom-prefix}-input-color-disabled', @color-disabled);
@date-input-color-background: var(~'@{date-picker-custom-prefix}-input-color-background', @color-white);
@date-input-color-background-disabled: var(~'@{date-picker-custom-prefix}-input-color-background-disabled', @color-background-contain-disabled);
@date-input-color-focus: var(~'@{date-picker-custom-prefix}-input-color-focused', @color-text-primary);
@date-icon-color: var(~'@{date-picker-custom-prefix}-icon-color', #d9d9d9);
@date-icon-color-hover: var(~'@{date-picker-custom-prefix}-icon-color-hover', #999);
@date-clear-background-color: var(~'@{date-picker-custom-prefix}-clear-color-background', @color-background);
@date-clear-background-color-hover: var(~'@{date-picker-custom-prefix}-clear-color-background-hover', @color-theme-5);
@date-clear-background-color-focused: var(~'@{date-picker-custom-prefix}-clear-color-background-focused', @color-theme);
@date-container-color: var(~'@{date-picker-custom-prefix}-container-color', @color-text-primary);
@date-container-color-border: var(~'@{date-picker-custom-prefix}-container-color-border', @color-border-weak);
@date-container-color-background: var(~'@{date-picker-custom-prefix}-container-color-background', @color-background-2);
@date-footer-color-background: var(~'@{date-picker-custom-prefix}-footer-color-background', @color-background);
@date-bar-color-bg-active: var(~'@{date-picker-custom-prefix}-bar-color-bg-active', @color-theme);
@date-square-item-color-selected: var(~'@{date-picker-custom-prefix}-square-item-color-selected', @color-theme-hover);
@date-range-item-color-bg: var(~'@{date-picker-custom-prefix}-range-item-color-bg', @color-theme-1);

// sizing
@date-width: var(~'@{date-picker-custom-prefix}-sizing-width', 230px);
@date-large-height: var(~'@{date-picker-custom-prefix}-large-sizing-height', 36px);
@date-middle-height: var(~'@{date-picker-custom-prefix}-middle-sizing-height', 30px);
@date-small-height: var(~'@{date-picker-custom-prefix}-small-sizing-height', 20px);
@date-panel-header-height: var(~'@{date-picker-custom-prefix}-panel-header-sizing-height', 36px);

// spacing
@date-small-padding-vertical: var(~'@{date-picker-custom-prefix}-small-spacing-padding-vertical', 4px);
@date-small-padding-horizontal: var(~'@{date-picker-custom-prefix}-small-spacing-padding-horizontal', 9px);
@date-middle-padding-vertical: var(~'@{date-picker-custom-prefix}-middle-spacing-padding-vertical', 5px);
@date-middle-padding-horizontal: var(~'@{date-picker-custom-prefix}-middle-spacing-padding-horizontal', 9px);
@date-large-padding-vertical: var(~'@{date-picker-custom-prefix}-large-spacing-padding-vertical', 8px);
@date-large-padding-horizontal: var(~'@{date-picker-custom-prefix}-large-spacing-padding-horizontal', 9px);
@date-suffix-spacing-margin-left: var(~'@{date-picker-custom-prefix}-suffix-spacing-margin-left', 10px);

// font
@date-container-font-size: var(~'@{date-picker-custom-prefix}-container-font-size', @font-size-small);
@date-panel-font-size: var(~'@{date-picker-custom-prefix}-panel-font-size', @font-size-middle);
@date-small-font-size: var(~'@{date-picker-custom-prefix}-small-font-size', @font-size-small);
@date-middle-font-size: var(~'@{date-picker-custom-prefix}-middle-font-size', @font-size-middle);
@date-large-font-size: var(~'@{date-picker-custom-prefix}-large-font-size', @font-size-large);

// radius
@date-input-border-radius: var(~'@{date-picker-custom-prefix}-input-radius-border', @radius-border);
@date-panel-border-radius: var(~'@{date-picker-custom-prefix}-panel-radius-border', @radius-border);

// z-index
@date-panel-z-index: var(~'@{date-picker-custom-prefix}-panel-z-index', @z-index-popper);