// @mistercrunch
@select-primary-color: black;

/**
 * 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/keystonejs/react-select
*/

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

// common
//@select-primary-color:             #007eff;

// control options
@select-input-bg:                  #fff;
@select-input-bg-disabled:         #f9f9f9;
@select-input-border-color:        #ccc;
@select-input-border-radius:       4px;
@select-input-border-focus:        @select-primary-color;
@select-input-border-width:        1px;
@select-input-height:              30px;
@select-input-internal-height:     (@select-input-height - (@select-input-border-width * 2));
@select-input-placeholder:         #aaa;
@select-text-color:                #333;
@select-link-hover-color:          @select-input-border-focus;

@select-padding-vertical:          8px;
@select-padding-horizontal:        10px;

// menu options
@select-menu-zindex:               1;
@select-menu-max-height:           200px;

@select-option-color:              lighten(@select-text-color, 20%);
@select-option-bg:                 @select-input-bg;
@select-option-focused-color:      @select-text-color;
@select-option-focused-bg:         fade(@select-primary-color, 8%);
@select-option-focused-bg-fb:      mix(@select-primary-color, @select-option-bg, 8%);  // Fallback color for IE 8
@select-option-selected-color:     @select-text-color;
@select-option-selected-bg:        fade(@select-primary-color, 4%);
@select-option-selected-bg-fb:      mix(@select-primary-color, @select-option-bg, 4%);  // Fallback color for IE 8
@select-option-disabled-color:     lighten(@select-text-color, 60%);

@select-noresults-color:           lighten(@select-text-color, 40%);

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

// arrow indicator
@select-arrow-color:               #999;
@select-arrow-color-hover:         #666;
@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-font-size:            .9em;

@select-item-bg:                   fade(@select-primary-color, 8%);
@select-item-bg-fb:                mix(@select-primary-color, @select-input-bg, 8%);  // Fallback color for IE 8
@select-item-color:                @select-primary-color;
@select-item-border-color:         fade(@select-primary-color, 24%);
@select-item-border-color-fb:      mix(@select-primary-color, @select-input-bg, 24%);  // Fallback color for IE 8
@select-item-hover-color:          darken(@select-item-color, 5%);
@select-item-hover-bg:             darken(@select-item-bg, 5%);
@select-item-hover-bg-fb:          mix(darken(@select-primary-color, 5%), @select-item-bg-fb, 8%);  // Fallback color for IE 8
@select-item-disabled-color:       #333;
@select-item-disabled-bg:          #fcfcfc;
@select-item-disabled-border-color: darken(@select-item-disabled-bg, 10%);

@select-item-border-radius:        2px;
@select-item-gutter:               5px;

@select-item-padding-horizontal:   5px;
@select-item-padding-vertical:     2px;

// imports
// @mistercrunch: these were altered to point to react-select/less
@import "../../node_modules/react-select/less/control.less";
@import "../../node_modules/react-select/less/menu.less";
@import "../../node_modules/react-select/less/mixins.less";
@import "../../node_modules/react-select/less/multi.less";
@import "../../node_modules/react-select/less/spinner.less";

// importing css from "../../node_modules/react-virtualized-select/styles.css";
// so the background color of a selected option matches the other selects
.VirtualSelectGrid {
  z-index: 1;
}
.VirtualizedSelectOption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 .5rem;
}
.VirtualizedSelectFocusedOption {
  background-color: rgba(0, 0, 0, 0.1);
}
.VirtualizedSelectFocusedOption:hover {
  cursor: pointer;
}
.VirtualizedSelectDisabledOption {
  opacity: 0.5;
}
.VirtualizedSelectSelectedOption {
  font-weight: bold;
}