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

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

// color
@color-picker-panel-option-color-background: var(~'@{color-picker-custom-prefix}-panel-option-color-background-selected', @color-theme-3);

// font
@color-picker-input-font-size: var(~'@{color-picker-custom-prefix}-input-font-size', @font-size-middle);
@color-picker-panel-select-font-size: var(~'@{color-picker-custom-prefix}-panel-select-font-size', @font-size-middle);
@color-picker-panel-alpha-font-size: var(~'@{color-picker-custom-prefix}-panel-alpha-font-size', @font-size-middle);

// sizing
@color-picker-input-sizing-width: var(~'@{color-picker-custom-prefix}-input-sizing-width', 230px);
@color-picker-input-sizing-height: var(~'@{color-picker-custom-prefix}-input-sizing-height', 28px);
@color-picker-input-prefix-sizing-width: var(~'@{color-picker-custom-prefix}-input-prefix-sizing-width', 16px);
@color-picker-input-prefix-line-sizing-width: var(~'@{color-picker-custom-prefix}-input-prefix-line-sizing-width', 1px);
@color-picker-input-prefix-line-sizing-height: var(~'@{color-picker-custom-prefix}-input-prefix-line-sizing-height', 22.6px);
@color-picker-input-prefix-sizing-height: var(~'@{color-picker-custom-prefix}-input-prefix-sizing-height', 16px);
@color-picker-panel-sizing-width: var(~'@{color-picker-custom-prefix}-panel-sizing-width', 304px);
@color-picker-panel-select-sizing-width: var(~'@{color-picker-custom-prefix}-panel-select-sizing-width', 212px);
@color-picker-panel-select-sizing-height: var(~'@{color-picker-custom-prefix}-panel-select-sizing-height', 28px);
@color-picker-panel-preset-sizing-width: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-width', 16px);
@color-picker-panel-preset-sizing-height: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-height', 16px);
@color-picker-panel-historical-sizing-width: var(~'@{color-picker-custom-prefix}-panel-historical-sizing-width', 16px);
@color-picker-panel-historical-sizing-height: var(~'@{color-picker-custom-prefix}-panel-historical-sizing-height', 16px);

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