// react-select variables
// ------------------------------

// control options
$select-input-bg:                   $input-bg;
$select-input-bg-disabled:          $input-disabled-bg;
$select-input-border-color:         $input-border-color;
$select-input-border-radius:        $input-border-radius;
$select-input-border-focus:         $input-focus-border-color;
$select-input-box-shadow-focus:     $input-focus-box-shadow;
$select-input-border-width:         $input-border-width;
$select-input-height:               $input-height;
$select-input-internal-height:      $input-height;
$select-input-placeholder:          $text-muted;
$select-text-color:                 $input-color;
$select-link-hover-color:           $dropdown-link-hover-color;
$select-input-hover-box-shadow:     $input-box-shadow;

$select-padding-vertical:           $input-padding-y;
$select-padding-horizontal:         10px;

// menu options
$select-menu-zindex:                1000;
$select-menu-max-height:            400px;
$select-menu-box-shadow:            $dropdown-box-shadow;

$select-option-color:               $input-color;
$select-option-bg:                  $select-input-bg;
$select-option-focused-color:       $input-color;
$select-option-focused-bg:          $dropdown-link-hover-bg;
$select-option-selected-color:      $dropdown-link-active-color;
$select-option-selected-bg:         $dropdown-link-active-bg;
$select-option-disabled-color:      lighten($select-text-color, 60%);

$select-noresults-color:            $body-color;

// clear "x" button
$select-clear-size:                 $select-input-height / 2;
$select-clear-color:                #999;
$select-clear-hover-color:          $body-color;
$select-clear-width:                ($select-input-internal-height / 2);

// arrow indicator
$select-arrow-color:                $gray-200;
$select-arrow-color-hover:          $gray-300;
$select-arrow-width:                5px;

// loading indicator
$select-loading-size:               16px;
$select-loading-color:              $select-text-color;
$select-loading-color-bg:           $select-input-border-color;

// multi-select item
$select-item-border-radius:         3px;
$select-item-gutter:                5px;
$select-item-padding-vertical:      2px;
$select-item-padding-horizontal:    5px;
$select-item-font-size:             .9em;
$select-item-color:                 $component-active-color;
$select-item-bg:                    $component-active-bg;
$select-item-border-color:          $component-active-bg;
$select-item-hover-color:           darken($select-item-color, 5%);
$select-item-hover-bg:              darken($select-item-bg, 5%);
$select-item-disabled-color:        #333;
$select-item-disabled-bg:           #fcfcfc;
$select-item-disabled-border-color: darken($select-item-disabled-bg, 10%);

@import "~react-select-legacy/scss/default";