/// Select styles
/// @source https://github.com/JedWatson/react-select
///
/// These are React Select's slightly-modified default SCSS styles, namespaced
/// inside a k-Select style.
///
/// @example scss - Usage
///
/// @include k-Select;
///
/// @example html
///
///   <label class="k-Select__label">Select label:</label>
///   <div class="k-Select">
///     <div class="Select-control">…</div>
///   </div>
///
@mixin k-Select {
  $options: (
    error-color: map-get($k-colors, 'error-3'),
    valid-color: map-get($k-colors, 'tertiary-2'),
    select-input-bg: map-get($k-colors, 'background-1'),
    select-input-bg-disabled: map-get($k-colors, 'line-1'),
    select-item-disabled-color: map-get($k-colors, 'font-2'),
    arrow-zone-width: k-px-to-rem(40px),
    select-input-border-width: k-px-to-rem(2px),
    select-input-height: k-px-to-rem(50px),
  );

  $options-tiny: map-merge($options, (
    arrow-zone-width: k-px-to-rem(30px),
    select-input-height: k-px-to-rem(40px),
  ));

  $font: 'light';

  $label-font: 'regular';
  $font-step: -1; // 14px

  .k-Select {
    @include k-typographyFont($font);
    @include k-typographyFontSize($font-step);
    @include _k-Select-ReactSelect($options);
    @include _k-Select-Overrides($options);
  }

  .k-Select--tiny {
    @include _k-Select-ReactSelect($options-tiny);
    @include _k-Select-Overrides($options-tiny);
  }

  .k-Select__option--level1 {
    @include k-typographyFont($font);
  }

  .k-Select__option--level2 {
    padding-left: k-px-to-rem(10px);
  }

  .k-Select__label {
    display: inline-block;
    margin-bottom: k-px-to-rem(10px);

    @include k-typographyFont($label-font);
    @include k-typographyFontSize($font-step);
  }

  .k-Select.is-error .Select:not(.is-open):not(.is-focused) {
    .Select-control {
      border-color: map-get($options, 'error-color');
    }

    .Select-arrow-zone {
      border-left-color: map-get($options, 'error-color');
    }
  }

  .k-Select.is-valid .Select:not(.is-open):not(.is-focused) {
    .Select-control {
      border-color: map-get($options, 'valid-color');
    }

    .Select-arrow-zone {
      border-left-color: map-get($options, 'valid-color');
    }
  }

  .k-Select.is-disabled .Select:not(.is-open):not(.is-focused) {
    .Select-control {
      background-color: map-get($options, 'select-input-bg-disabled');
      border-color: map-get($options, 'select-input-bg-disabled');
    }

    .Select-arrow-zone {
      background: map-get($options, 'select-input-bg-disabled')
                  url('~icons/arrow-bottom-disabled.svg')
                  no-repeat
                  center;
      cursor: not-allowed;
    }

    .Select-value {
      cursor: not-allowed;
    }

    .Select-value-label {
      color: map-get($options, 'select-item-disabled-color');
    }
  }

  @include _k-Select-ReactSelectAnimations;
}

// Our overrides to React Select's default styles
// TODO: Merge with _ReactSelect. Not possible to keep both separated.
@mixin _k-Select-Overrides($options) {
  $arrow-zone-width: k-map-fetch($options, 'arrow-zone-width');
  $select-input-border-width: k-map-fetch($options,
                                          'select-input-border-width');

  .Select-arrow-zone {
    width: $arrow-zone-width;
    padding-right: 0;

    border: none;
    border-left: k-px-to-rem(2px) solid map-get($k-colors, 'line-1');
    background: map-get($options, 'select-input-bg')
                url('~icons/arrow-bottom-black.svg')
                no-repeat
                center;
  }

  .Select-arrow {
    display: none;
  }

  .Select-menu-outer {
    border-top-color: map-get($k-colors, 'line-1');

    // When the select is open, hide the arrow-zone's bottom border
    &:before {
      position: absolute;
      top: -$select-input-border-width;
      right: 0;

      width: $arrow-zone-width - $select-input-border-width;
      height: $select-input-border-width;

      content: "";
      background: map-get($k-colors, 'background-2');
    }
  }

  .Select.is-focused:not(.is-open) .Select-arrow-zone {
    border-left-color: map-get($k-colors, 'line-2');
  }

  .Select.is-open .Select-arrow-zone {
    background-color: map-get($k-colors, 'background-2');
    background-image: url('~icons/arrow-top-black.svg');
  }
}

// React Select's default styles
//
// Changes applied:
// - changed the default colors to match our styles
// - removed mixins
// - merged all SCSS files into one file
// - applied our code-style
@mixin _k-Select-ReactSelect($options) {

  /**
   * 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-border-color: map-get($k-colors, 'line-1');
  $select-input-border-focus: map-get($k-colors, 'line-2');
  $select-input-border-width: k-map-fetch($options,
                                          'select-input-border-width');
  $select-input-height: k-default(map-get($options,
                                          'select-input-height'),
                                          40px);
  $select-input-internal-height:
    ($select-input-height - ($select-input-border-width * 2));
  $select-input-placeholder: map-get($k-colors, 'font-2');
  $select-text-color: map-get($k-colors, 'font-1');
  $select-link-hover-color: $select-input-border-focus;
  $select-input-searchable-height: k-px-to-rem(44px);

  $select-padding-vertical: 10px;
  $select-padding-horizontal: 15px;

  // menu options
  $select-menu-zindex: 1000;
  $select-menu-max-height: 250px;

  $select-option-color: $select-text-color;
  $select-option-bg: map-get($k-colors, 'background-2');
  $select-option-focused-color: $select-text-color;
  $select-option-focused-bg: map-get($k-colors, 'line-1');
  $select-option-selected-color: map-get($k-colors, 'font-1');
  $select-option-selected-bg: map-get($k-colors, 'line-2');
  $select-option-disabled-color: map-get($k-colors, 'line-2');

  $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;
  $select-clear-width: ($select-input-internal-height / 2);

  // arrow indicator
  $select-arrow-color: map-get($k-colors, 'font-1');
  $select-arrow-color-hover: map-get($k-colors, 'font-1');
  $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-gutter: 5px;
  $select-item-padding-vertical: 2px;
  $select-item-padding-horizontal: 5px;
  $select-item-font-size: 1em;
  $select-item-color: map-get($k-colors, 'font-1');
  $select-item-bg: map-get($k-colors, 'line-2');
  $select-item-border-color: darken($select-item-bg, 10%);
  $select-item-hover-color: darken($select-item-color, 5%);
  $select-item-hover-bg: darken($select-item-bg, 5%);

  /* stylelint-disable selector-max-specificity */
  /* stylelint-disable no-descending-specificity */
  .Select {
    position: relative;

    // preferred box model
    &,
    & div,
    & input,
    & span {
      box-sizing: border-box;
    }
  }

  // Base

  .Select-control {
    background-color: map-get($options, 'select-input-bg');
    border-color:
      lighten($select-input-border-color, 5%)
      $select-input-border-color
      darken($select-input-border-color, 10%);
    border: $select-input-border-width solid $select-input-border-color;
    color: $select-text-color;
    cursor: default;
    display: table;
    border-spacing: 0;
    border-collapse: separate;
    height: $select-input-height;
    outline: none;
    overflow: hidden;
    position: relative;
    width: 100%;

    .Select-input:focus {
      outline: none;
    }
  }

  .is-searchable {
    &.is-open > .Select-control {
      cursor: text;
      line-height: $select-input-searchable-height;
    }
  }

  .is-open > .Select-control {
    background-color: map-get($options, 'select-input-bg');
    border-color:
      $select-input-border-color
      $select-input-border-color
      lighten($select-input-border-color, 5%);

    // flip the arrow so its pointing up when the menu is open
    > .Select-arrow {
      border-color: transparent transparent $select-arrow-color;
      border-width: 0 $select-arrow-width $select-arrow-width;
    }
  }

  .is-searchable {
    &.is-focused:not(.is-open) > .Select-control {
      cursor: text;
      line-height: $select-input-searchable-height;
    }
  }

  .is-focused:not(.is-open) > .Select-control {
    border-color:
      $select-input-border-focus
      lighten($select-input-border-focus, 5%)
      lighten($select-input-border-focus, 5%);
    box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, .1),
      0 0 5px -1px fade($select-input-border-focus, 50%);
  }

  // placeholder
  .Select-placeholder,
  .Select--single > .Select-control .Select-value {
    bottom: 0;
    color: $select-input-placeholder;
    left: 0;
    line-height: $select-input-internal-height;
    padding-left: $select-padding-horizontal;
    padding-right: $select-padding-horizontal;
    position: absolute;
    right: 0;
    top: 0;

    // crop text
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .has-value.Select--single > .Select-control .Select-value,
  .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
    .Select-value-label {
      color: $select-text-color;
    }

    a.Select-value-label {
      cursor: pointer;
      text-decoration: none;

      &:hover,
      &:focus {
        color: $select-link-hover-color;
        outline: none;
        text-decoration: underline;
      }
    }
  }


  // the <input> element users type in

  .Select-input {
    // inherits `display: inline-block` from "react-input-autosize"
    height: $select-input-internal-height;
    padding-left: $select-padding-horizontal;
    padding-right: $select-padding-horizontal;
    vertical-align: middle;

    > input {
      background: none transparent;
      border: 0 none;
      box-shadow: none;
      cursor: default;
      display: inline-block;
      font-family: inherit;
      font-size: inherit;
      margin: 0;
      outline: none;
      line-height: k-px-to-rem(14px); // For IE 8 compatibility
      padding:
        (($select-input-internal-height - 14) / 2 - 2)
        0
        (($select-input-internal-height - 14) / 2 + 2); // IE 8 compatibility
      -webkit-appearance: none;

      .is-focused & {
        cursor: text;
      }
    }

  }

  // fake-hide the input when the control is pseudo-focused
  .has-value.is-pseudo-focused .Select-input {
    opacity: 0;
  }

  // fake input
  .Select-control:not(.is-searchable) > .Select-input {
    outline: none;
  }

  // loading indicator
  .Select-loading-zone {
    cursor: pointer;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: $select-loading-size;
  }
  .Select-loading {
    animation: k-Select-animation-spin 400ms infinite linear;
    width: $select-loading-size;
    height: $select-loading-size;
    box-sizing: border-box;
    border-radius: 50%;
    border: floor(($select-loading-size / 8)) solid $select-loading-color-bg;
    border-right-color: $select-loading-color;
    display: inline-block;
    position: relative;

    vertical-align: middle;
  }


  // the little cross that clears the field

  .Select-clear-zone {
    animation: k-Select-animation-fadeIn 200ms;
    color: $select-clear-color;
    cursor: pointer;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: $select-clear-width;

    &:hover {
      color: $select-clear-hover-color;
    }
  }
  .Select-clear {
    display: inline-block;
    font-size: $select-clear-size;
    line-height: 1;
  }
  .Select--multi .Select-clear-zone {
    width: $select-clear-width;
  }

  .Select--multi .Select-multi-value-wrapper {
    display: inline-block;
  }

  .Select .Select-aria-only {
    display: inline-block;
    height: 1px;
    width: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
  }

  // arrow indicator

  .Select-arrow-zone {
    cursor: pointer;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: ($select-arrow-width * 5);
    padding-right: $select-arrow-width;
  }

  .Select-arrow {
    border-color: $select-arrow-color transparent transparent;
    border-style: solid;
    border-width:
      $select-arrow-width
      $select-arrow-width
      ($select-arrow-width / 2);
    display: inline-block;
    height: 0;
    width: 0;
  }

  .is-open .Select-arrow,
  .Select-arrow-zone:hover > .Select-arrow {
    border-top-color: $select-arrow-color-hover;
  }

  //
  // Select Menu
  // ------------------------------

  // wrapper around the menu

  .Select-menu-outer {
    // Unfortunately, having both border-radius and allows scrolling using
    // overflow defined on the same element forces the browser to repaint on
    // scroll.  However, if these definitions are split into an outer and an
    // inner element, the browser is able to optimize the scrolling behavior
    // and does not have to repaint on scroll.
    background-color: map-get($options, 'select-input-bg');
    border: k-px-to-rem(2px) solid $select-input-border-color;
    border-top-color: mix(map-get($options, 'select-input-bg'), $select-input-border-color, 50%);
    box-sizing: border-box;
    margin-top: -1px;
    max-height: $select-menu-max-height;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: $select-menu-zindex;
    -webkit-overflow-scrolling: touch;
  }

  // wrapper

  .Select-menu {
    max-height: ($select-menu-max-height - 2px);
    overflow-y: auto;
  }

  // options

  .Select-option {
    box-sizing: border-box;
    background-color: $select-option-bg;
    color: $select-option-color;
    cursor: pointer;
    display: block;
    padding: $select-padding-vertical $select-padding-horizontal;

    &.is-selected {
      background-color: $select-option-selected-bg;
      color: $select-option-selected-color;
    }

    &.is-focused {
      background-color: $select-option-focused-bg;
      color: $select-option-focused-color;
    }

    &.is-disabled {
      color: $select-option-disabled-color;
      cursor: default;
    }

  }

  // no results

  .Select-noresults {
    box-sizing: border-box;
    color: $select-noresults-color;
    cursor: default;
    display: block;
    padding: $select-padding-vertical $select-padding-horizontal;
  }

  //
  // Multi-Select
  // ------------------------------

  // Base

  .Select--multi {

    // add margin to the input element
    .Select-input {
      vertical-align: middle;
      margin-left: $select-padding-horizontal;
      padding: 0;
    }

    // reduce margin once there is value
    &.has-value .Select-input {
      margin-left: $select-item-gutter;
    }

    // Items
    .Select-value {
      background-color: $select-item-bg;
      border: 1px solid $select-item-border-color;
      color: $select-item-color;
      display: inline-block;
      font-size: $select-item-font-size;
      margin-left: $select-item-gutter;
      margin-top: $select-item-gutter;
      vertical-align: top;
    }

    // common
    .Select-value-icon,
    .Select-value-label {
      display: inline-block;
      vertical-align: middle;
    }

    // label
    .Select-value-label {
      cursor: default;
      padding: $select-item-padding-vertical $select-item-padding-horizontal;
    }
    a.Select-value-label {
      color: $select-item-color;
      cursor: pointer;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    // icon
    .Select-value-icon {
      cursor: pointer;
      border-right: 1px solid $select-item-border-color;

      // move the baseline up by 1px
      padding:
        ($select-item-padding-vertical - 1)
        $select-item-padding-horizontal
        ($select-item-padding-vertical + 1);

      &:hover,
      &:focus {
        background-color: $select-item-hover-bg;
        color: $select-item-hover-color;
      }
      &:active {
        background-color: $select-item-border-color;
      }
    }

  }

  /* stylelint-enable */
}

// React Select's default animations
//
// Changes applied:
// - namespaced the animations with `k-Select-`
@mixin _k-Select-ReactSelectAnimations {
  //
  // Animation
  // ------------------------------

  // fade in

  @-webkit-keyframes k-Select-animation-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes k-Select-animation-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  // spin

  @-webkit-keyframes k-Select-animation-spin {
    to { -webkit-transform: rotate(1turn); }
  }
  @keyframes k-Select-animation-spin {
    to { transform: rotate(1turn); }
  }
}