@import '../../styles/themes/index.less';
@import '../../styles/mixins/index.less';
@import '../../input/style/token.less';

/**********************************************
 * type: single / multi
 * size:   small / middle / large
 **********************************************/
@select-size-small-height: @size-small;
@select-size-middle-height: @size-middle;
@select-size-large-height: @size-large;

@select-size-small-font-size: @font-size-base;
@select-size-middle-font-size: @font-size-base;
@select-size-large-font-size: @font-size-base;

@select-signal-size-small-padding: @spacing-6;
@select-signal-size-middle-padding: @spacing-6;
@select-signal-size-large-padding: @spacing-7;

@select-multi-padding: @spacing-2;
@select-size-icon: @size-3;
@select-size-icon-bg: @size-4;

/**********************************************
  * border
  **********************************************/
@select-border-width: @border-1;
@select-border-radius: @border-radius;

/************************************************
  * status: default / disabled _ (hover / focus)
  ************************************************/
// text color
@select-color-text_default: var(--color-text-1);
@select-color-text_disabled: var(--color-text-4);
@select-color-text_focused: var(--color-text-1);
@select-color-placeholder_default: var(--color-text-3);
@select-color-placeholder_disabled: var(--color-text-4);
@select-color-placeholder_focused: var(--color-text-3);

// icon color
@select-color-icon_default: var(--color-text-2);
@select-color-icon_disabled: var(--color-text-4);
@select-color-icon_focused: var(--color-text-2);
@select-color-icon-bg_hover: var(--color-fill-4);

// bg color with hover & focus
@select-color-bg_default: var(--color-bg-5);
@select-color-bg_default_hover: var(--color-bg-5);
@select-color-bg_default_focus: var(--color-bg-5);
@select-color-bg_error_focus: var(--color-bg-5);
@select-color-bg_error: var(--color-bg-5);
@select-color-bg_error_hover: var(--color-bg-5);
@select-color-bg_disabled: var(--color-fill-1);
@select-color-bg_disabled_hover: @select-color-bg_disabled;

// border color with hover & focus
@select-color-border_default: var(--color-border);
@select-color-border_default_hover: var(--primary-5);
@select-color-border_default_focus: var(--primary-6);
@select-color-border_error: var(--danger-6);
@select-color-border_error_hover: var(--danger-5);
@select-color-border_error_focus: var(--danger-6);
@select-color-border_disabled: var(--color-border-2);
@select-color-border_disabled_hover: @select-color-border_disabled;

// shadow
@select-shadow-distance_default_focus: @shadow-distance-none;
@select-shadow-distance_error_focus: @shadow-distance-none;
@select-color-shadow_default_focus: var(--primary-2);
@select-color-shadow_error_focus: var(--danger-2);

/**********************************************
  * Popup Box
  **********************************************/
@select-popup-max-height: @size-50;
@select-popup-border-radius: @border-radius;
@select-popup-padding-vertical: @spacing-2;
@select-popup-padding-horizontal: @spacing-none;
@select-popup-font-size: @font-size-base;
@select-popup-color-bg: var(--color-bg-5);
@select-popup-color-border: var(--color-fill-3);
@select-popup-box-shadow: @shadow2-down;

/**********************************************
  * Popup Options
  * status: default / disabled / selected / hover
  **********************************************/
@select-popup-option-height: @size-7;
@select-popup-option-font-weight_selected: @font-weight-400;
@select-signal-popup-option-padding-horizontal: @spacing-6;
@select-multi-popup-option-padding-horizontal: @spacing-2;
@select-popup-option-border-radius: @border-radius-none;

@select-popup-option-color-bg_default: var(--color-bg-5);
@select-popup-option-color-bg_hover: var(--color-fill-2);
@select-popup-option-color-bg_selected: var(--color-bg-5);
@select-popup-option-color-bg_disabled: var(--color-bg-5);

@select-popup-option-color-text_default: var(--color-text-1);
@select-popup-option-color-text_hover: var(--color-text-1);
@select-popup-option-color-text_selected: var(--primary-6);
@select-popup-option-color-text_disabled: var(--color-text-4);

@select-popup-option-color-hightlight-text: var(--color-text-1);
@select-popup-option-font-hightlight-weight: @font-weight-400;

// option group title
@select-popup-group-title-height: @size-5;
@select-popup-group-title-padding-horizontal: @spacing-6;
@select-popup-group-title-padding-top: @spacing-4;
@select-popup-group-title-font-size: @font-size-base;
@select-popup-group-title-color-text: var(--color-text-3);

// addon
@select-addon-padding-horizontal: @spacing-6;
@select-color-addon-bg: @select-color-bg_default;
@select-color-addon-border: var(--color-border-2);
@select-color-addon-border_default: @color-transparent;
@select-border-addon-separator-width: @border-1;
@select-color-addon-text: var(--color-text-1);

// warning
@select-color-bg_warning_focus: @input-color-bg_warning_focus;
@select-color-bg_warning: @input-color-bg_warning;
@select-color-bg_warning_hover: @input-color-bg_warning_hover;
@select-color-border_warning: @input-color-border_warning;
@select-color-border_warning_hover: @input-color-border_warning_hover;
@select-color-border_warning_focus: @input-color-border_warning_focus;
@select-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@select-shadow-distance_warning_focus: @select-shadow-distance_error_focus;