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

@search-prefix: '--@{kd-prefix}-c-search';

// sizing
@search-icon-font-size: var(~'@{search-prefix}-icon-font-size', 16px);
@search-small-width: var(~'@{search-prefix}-sizing-width-small', 200px);
@search-middle-width: var(~'@{search-prefix}-sizing-width-middle', 260px);
@search-large-width: var(~'@{search-prefix}-sizing-width-large', 320px);
@quick-search-default-width: var(~'@{search-prefix}-sizing-width-default', 200px);
@quick-search-default-height: var(~'@{search-prefix}-sizing-height-default', 24px);
@quick-search-max-width: var(~'@{search-prefix}-sizing-width-max', 400px);
@search-panel-width: var(~'@{search-prefix}-panel-sizing-width', 800px);
@search-panel-height: var(~'@{search-prefix}-panel-sizing-height', 60px);
@quick-search-dropdown-option-height: var(~'@{search-prefix}-dropdown-option-sizing-height', 32px);
@search-sizing-border-width: var(~'@{search-prefix}-sizing-border-width', 1px);
@search-tag-max-width: var(~'@{search-prefix}-tag-sizing-max-width');

// color
@search-icon-color: var(~'@{search-prefix}-icon-color', #B2B2B2);
@search-color-theme: var(~'@{search-prefix}-color-theme', @color-theme);
@search-hover-color: var(~'@{search-prefix}-color-hover', #5582F3);
@quick-search-input-color: var(~'@{search-prefix}-input-color-text', @color-disabled);
@quick-search-border-bottom-color: var(~'@{search-prefix}-color-border', @color-border-strong-2);
@quick-search-dropdown-desc-color: var(~'@{search-prefix}-dropdown-desc-color-text', #999999);
@quick-search-npl-border-color: var(~'@{search-prefix}-npl-color-border', #D8D8D8);
@quick-search-selection-placeholder-color: var(~'@{search-prefix}-selection-placeholder-color-text', #B2B2B2);
@search-panel-hover-color: var(~'@{search-prefix}-panel-color-hover', #597cfc);
@search-panel-border-color: var(~'@{search-prefix}-panel-color-border', #E6E8ED);
@search-end-color: var(~'@{search-prefix}-color-end', @color-end);
@search-color-text-primary: var(~'@{search-prefix}-color-text-primary', @color-text-primary);
@search-color-text-secondary: var(~'@{search-prefix}-color-text-secondary', @color-text-secondary);
@search-color-text-third: var(~'@{search-prefix}-color-text-third', @color-text-third);
@search-dot-color-first: var(~'@{search-prefix}-dot-color-first', @color-logo-1);
@search-dot-color-second: var(~'@{search-prefix}-dot-color-second', @color-logo-2);
@search-dot-color-third: var(~'@{search-prefix}-dot-color-third', @color-logo-3);
@search-dot-color-fourth: var(~'@{search-prefix}-dot-color-fourth', @color-logo-4);
@search-placeholder-color-text: var(~'@{search-prefix}-placeholder-color-text', #B2B2B2);
@quick-search-selected-tags-del-hover-bg: var(~'@{search-prefix}-selected-tags-del-color-background-hover', #999999);
@quick-search-dropdown-selected-bg: var(~'@{search-prefix}-dropdown-tags-color-background-selected', #F2F6FF);
@quick-search-dropdown-hover-bg: var(~'@{search-prefix}-dropdown-color-background-hover', @color-hover);
@search-panel-hover-bg: var(~'@{search-prefix}-panel-color-background-hover', #eef3fe);
@search-color-background: var(~'@{search-prefix}-color-background', @color-background);
@search-disabled-contain-bg: var(~'@{search-prefix}-color-background-contain-disabled', @color-background-contain-disabled);

// font
@quick-search-dropdown-font-size: var(~'@{search-prefix}-dropdown-font-size', 12px);
@search-middle-font-size: var(~'@{search-prefix}-font-size-middle', @font-size-middle);
@search-small-font-size: var(~'@{search-prefix}-font-size-small', @font-size-small);
@search-placeholder-font-size: var(~'@{search-prefix}-placeholder-font-size', 12px);
@search-dropdown-desc-font-size: var(~'@{search-prefix}-dropdown-desc-font-size', 12px);
@search-input-font-size: var(~'@{search-prefix}-input-font-size', 12px);

// spacing
@quick-search-dropdown-option-padding-horizontal: var(~'@{search-prefix}-dropdown-option-spacing-padding-horizontal', 12px);

// motion
@search-transition-duration: var(~'@{search-prefix}-motion-duration', @duration-promptly);

// radius
@search-dropdown-border-radius: var(~'@{search-prefix}-dropdown-radius-border', @radius-border);
@search-border-radius: var(~'@{search-prefix}-radius-border', @radius-border);