/* =====================================================
    SEARCH SPECIFIC VARIABLES
   ------------------------------------------------------
  */
//## Define common padding and border and more.

$search-font-size:                                var(--dlt-font-size-xs, 0.875rem);
$search-font-size-sm:                             var(--dlt-font-size-xxs, 0.75rem);
$search-line-height-sm:                           .8rem;

$search-help-padding:                             0 8px;
$search-help-height:                              var(--dlt-sizing-sm, 24px);
$search-help-margin:                              4px;
$search-help-text-color:                          4px;

$search-drawer-padding:                           4px;
$search-drawer-top:                               32px;
$search-drawer-z-index:                           9;
$search-drawer-elevation:                         var(--dlt-elevation-border, 0px 0px 0px transparent), var(--dlt-elevation-md, $shadow-depth-12);
$search-drawer-list-item-padding:                 0 var(--dlt-spacing-1-x, .5rem);
$search-drawer-list-item-height:                  var(--dlt-sizing-md, 32px);
$search-drawer-list-item-remove-button-right:     3px;
$search-drawer-list-item-remove-button-top:       4px;
$search-drawer-list-item-font-weight:             var(--dlt-font-weight-regular, 400);
$search-drawer-list-item-highlight-margin-right:  4px;
$search-drawer-list-item-highlight-font-weight:   var(--dlt-font-weight-medium, 500);

$search-drawer-multiline-padding:                 5px 8px;

$search-clear-icon-font-size:                     var(--dlt-font-size-xxl,1.5rem);
$search-clear-icon-sync-top:                      4px;

$search-search-icon-sync-position:                4px;
$search-search-icon-font-size:                    var(--dlt-font-size-sm,1rem);
$search-search-icon-line-height:                  11px;
$search-search-icon-bottom:                       -2px;
$search-search-icon-margin-right:                 4px;

$search-drawer-no-results-text-padding:           7.5px 4px 7.5px 8px;
$search-drawer-no-results-text-line-height:       1rem;
$search-drawer-no-results-last-child-padding:     4px;

$search-async-button-size:                        var(--dlt-sizing-md, 2rem);
$search-clear-icon-async-top:                     4px;
$search-clear-icon-async-right:                   2.2rem;

$search-border-radii:                             var(--dlt-border-radii-default, 0);
$search-border-style:                             var(--dlt-border-style-default, solid);
$search-border-style-hover:                       var(--dlt-border-style-hover, solid);
$search-border-width:                             var(--dlt-border-width-default,  1px);
$search-border-width-hover:                       var(--dlt-border-width-hover, 2px);



/* =====================================================
    COMPONENT SHARED STYLES
   ------------------------------------------------------
*/
//** Colors

$search-color-help-text:                          var(--dlt-color-text-static-subtle, $gray-50);

//## COLORS ARE SHARED FROM FORMS_VAR

$el: 'search';

$search-color-background:                         var(--dlt-#{$el}-color-background-default, $component-color-background-default);
$search-color-border:                             var(--dlt-#{$el}-color-border-separator, $component-color-border-separator);

$search-color-primary:                            var(--dlt-#{$el}-color-interactive-primary-default, $component-color-primary-default); 
$search-color-icon-static:                        var(--dlt-#{$el}-color-icon-static-primary, $component-color-icon-muted-primary); 
$search-color-text-interactive-secondary:         var(--dlt-#{$el}-color-text-interactive-secondary, $component-color-text-interactive-secondary); 
$search-color-icon-interactive-secondary:         var(--dlt-#{$el}-color-icon-interactive-secondary, var(--dlt-component-color-icon-interactive-secondary, var(--dlt-color-icon-interactive-secondary, $brand-primary-light-css-var))); 
$search-color-icon-interactive-secondary-search:  var(--dlt-#{$el}-color-icon-interactive-secondary, var(--dlt-component-color-icon-interactive-secondary, var(--dlt-color-icon-interactive-secondary, $blue-primary))); 
$search-color-primary-active:                     var(--dlt-#{$el}-color-interactive-primary-active, $component-color-primary-active); 



