/**
 * React Select
 * ============
 * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
 * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
 * MIT License: https://github.com/JedWatson/react-select
*/

// Variables
// ------------------------------

// control options
$select-input-bg:                   #fff !default;
$select-input-bg-disabled:          #f9f9f9 !default;
$select-input-bg-focus:             #fff !default;
$select-input-border-color:         $base-border-color !default;
$select-input-border-radius:        3px !default;
$select-input-border-focus:         darken($base-border-color, 10%) !default;
$select-input-box-shadow-focus:     none !default;
$select-input-border-width:         1px !default;
$select-input-height:               40px !default;
$select-input-internal-height:      ($select-input-height - ($select-input-border-width * 2)) !default;
$select-input-placeholder:          #333 !default;
$select-text-color:                 #333 !default;
$select-link-hover-color:           #8e959d !default;
$select-input-hover-box-shadow:     none !default;

$select-padding-vertical:           8px !default;
$select-padding-horizontal:         15px !default;

// menu options
$select-menu-zindex:                1000 !default;
$select-menu-max-height:            200px !default;
$select-menu-box-shadow:            $select-input-hover-box-shadow !default;

$select-option-color:               lighten($select-text-color, 20%) !default;
$select-option-bg:                  #fff !default;
$select-option-focused-color:       $select-text-color !default;
$select-option-focused-bg:          $base-border-color !default; // pale blue
$select-option-selected-color:      #000 !default;
$select-option-selected-bg:         lighten($base-border-color, 5%) !default; // lightest blue
$select-option-disabled-color:      lighten($base-border-color, 60%) !default;

$select-noresults-color:            lighten($select-text-color, 40%) !default;

// clear "x" button
$select-clear-size:                 floor(($select-input-height / 2)) !default;
$select-clear-color:                #999 !default;
$select-clear-hover-color:          #D0021B !default; // red
$select-clear-width:                ($select-input-internal-height / 2) !default;

// arrow indicator
$select-arrow-color:                #999 !default;
$select-arrow-color-hover:          #666 !default;
$select-arrow-width:                5px !default;

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

// multi-select item
$select-item-border-radius:         3px !default;
$select-item-gutter:                5px !default;
$select-item-padding-vertical:      2px !default;
$select-item-padding-horizontal:    5px !default;
$select-item-font-size:             .9em !default;
$select-item-color:                 #000 !default; // pale blue
$select-item-bg:                    #f2f9fc !default;
$select-item-border-color:          #e5eef9 !default;
$select-item-hover-color:           darken($base-border-color, 10%)  !default; // pale blue
$select-item-hover-bg:              darken($base-border-color, 10%)  !default;
$select-item-disabled-color:        #999 !default;
$select-item-disabled-bg:           #fcfcfc !default;
$select-item-disabled-border-color: darken($select-item-disabled-bg, 10%) !default;
