@import "../../node_modules/compass-mixins/lib/compass/css3/box-sizing";
@import "../../node_modules/compass-mixins/lib/compass/css3/images";
@import "../../node_modules/compass-mixins/lib/compass/css3/user-interface";

@import "../../node_modules/sass-svg-uri/_svg-uri.scss";

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";


$chosen-gray-darkest:           $gray-900;
$chosen-gray-darker:            $gray-700;
$chosen-gray-dark:              $gray-600;
$chosen-gray:                   $gray-500;
$chosen-gray-light:             $gray-400;
$chosen-gray-lighter:           $gray-300;
$chosen-gray-lightest:          $gray-100;
$chosen-success:                $success;
$chosen-danger:                 $danger;

$chosen-background:             $input-bg;
$chosen-border:                 1px solid $input-border-color;
$chosen-border-color:           $input-focus-border-color;
$chosen-border-radius:          $input-border-radius;
$chosen-multi-border-radius:    $chosen-border-radius;
$chosen-box-shadow:             none;
$chosen-drop-border:            $input-focus-border-color;
$chosen-drop-box-shadow:        0 4px 5px 0 rgba(0,0,0,.075), 0 2px 5px 0 $input-focus-box-shadow;
$chosen-drop-zindex:            1060;
$chosen-focus-border:           1px solid $input-focus-border-color;
$chosen-focus-box-shadow:       0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px $chosen-border-color;
$chosen-focus-transition:       border linear 0ms, box-shadow linear 0ms;
$chosen-placeholder-color:      $input-placeholder-color;
$chosen-height:                 $input-height;
$chosen-multi-height:           $input-height;
$chosen-svg-color:              $chosen-gray;
$chosen-svg-color-selected:     $chosen-gray-darker;
$chosen-svg-up:                 "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z";
$chosen-svg-down:               "M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z";
$chosen-svg-search:             "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z";
$chosen-svg-selected:           "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
$chosen-svg-deselect:           "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";

$chosen-svg-close:              "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
$chosen-svg-close-color:        $chosen-danger;
$chosen-svg-close-color-hover:  darken($chosen-danger, 20%);

.chosen-select,
.chosen-select-deselect {
  width: 100%;
}
.chosen-container {
  display: inline-block;
  position: relative;
  width: 100% !important;
  font-size: $font-size-base;
  text-align: left;
  vertical-align: middle;
  .chosen-drop {
    background: $chosen-background;
    border: 1px solid $chosen-drop-border;
    @include border-bottom-radius($chosen-border-radius);
    @include box-shadow($chosen-drop-box-shadow);
    margin-top: -1px;
    position: absolute;
    top: 100%;
    left: -9000px;
    z-index: $chosen-drop-zindex;
  }
  &.chosen-with-drop .chosen-drop {
    left: 0;
    right: 0;
  }
  .chosen-results {
    margin: 0;
    position: relative;
    max-height: 15rem;
    padding: .5rem 0 0 0;
    color: $chosen-gray-dark;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    li {
      display: none;
      line-height: $line-height-base;
      list-style: none;
      margin: 0;
      padding: .25rem .25rem .25rem 1.5rem;
      em {
        font-style: normal;
        color: $chosen-gray-dark;
      }
      &.group-result {
        display: list-item;
        cursor: default;
        padding-left: .75rem;
        color: $chosen-gray;
        font-weight: normal;
        text-transform: uppercase;
      }
      &.group-option {
        padding-left: 1.5rem;
      }
      &.active-result {
        cursor: pointer;
        display: list-item;
      }
      &.result-selected {
        color: $chosen-gray-darker;
        &:before {
          display: inline-block;
          position: relative;
          top: .3rem;
          width: 1.25rem;
          height: 1.25rem;
          margin-left: -1.25rem;
          content: "";
          background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-color-selected}' d='#{$chosen-svg-selected}'/></svg>");
          background-size: 1.25rem 1.25rem;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }
      &.highlighted {
        background-color: $link-color;
        background-image: none;
        color: white;
        &:before {
          background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='#{$chosen-svg-selected}'/></svg>");
        }
        em {
          background: transparent;
          color: rgba(255,255,255,.8);
        }
      }
      &.disabled-result {
        display: list-item;
        color: $chosen-gray-light;
      }
    }
    .no-results {
      display: list-item;
      padding: .25rem 0 1rem 1.065rem;
      color: $chosen-danger;
    }
  }
  .chosen-results-scroll {
    background: white;
    margin: 0 .25rem;
    position: absolute;
    text-align: center;
    width: 20rem;
    z-index: 1;
    span {
      display: inline-block;
      height: $line-height-base; // 17px;
      text-indent: -5000px;
      width: .5rem;
    }
  }
}
.chosen-container-single {
  .chosen-single {
    background-color: $chosen-background;
    background-clip: padding-box;
    border: $chosen-border;
    @include border-top-radius($chosen-border-radius);
    @include border-bottom-radius($chosen-border-radius);
    @include box-shadow($chosen-box-shadow);
    color: $chosen-gray-dark;
    display: block;
    height: $chosen-height;
    overflow: hidden;
    line-height: $chosen-height;
    padding: 0 0 0 .75rem;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    abbr {
      display: inline-block;
      position: absolute;
      top: .45rem;
      right: 2.5rem;
      width: 1.5rem;
      height: 1.5rem;
      cursor: pointer;
      background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-close-color}' d='#{$chosen-svg-deselect}'/></svg>");
      background-size: 1.5rem 1.5rem;
      background-position: center center;
      background-repeat: no-repeat;
      &:hover {
        background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-close-color-hover}' d='#{$chosen-svg-deselect}'/></svg>");
      }
    }
    span {
      display: block;
      margin-right: 1.5rem;
      text-overflow: ellipsis;
    }
    &.chosen-disabled .chosen-single abbr:hover {
      background-position: right 2px;
    }
    div {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 2rem;
      height: 100%;
      padding-left: .5rem;
      background-color: $chosen-background;
      &:after {
        display: inline-block;
        position: relative;
        top: .25rem;
        left: -1rem;
        width: 2rem;
        height: 2rem;
        content: "";
        background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-color}' d='#{$chosen-svg-down}'/></svg>");
        background-size: 2rem 2rem;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }
  }
  .chosen-default {
    color: $chosen-gray;
  }
  a:not([href]):not([tabindex]) {
    color: $chosen-placeholder-color !important;
  }
  a:not([href]):not([tabindex]).chosen-single:not(.chosen-default) {
    color: $chosen-gray-dark !important;
  }
  .chosen-search-input {
    display: none;
    border: none;
  }
  .chosen-search {
    margin: 0;
    padding: .5rem .5rem 0 .5rem;
    position: relative;
    white-space: nowrap;
    z-index: $zindex-dropdown;
    &:after {
      display: inline-block;
      position: relative;
      top: .365rem;
      left: -1.75rem;
      width: 1.25rem;
      height: 1.25rem;
      content: "";
      background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-color}' d='#{$chosen-svg-search}'/></svg>");
      background-size: 1.25rem 1.25rem;
      background-position: center center;
      background-repeat: no-repeat;
    }
    input[type="text"] {
      background-color: $chosen-gray-lightest;
      border: $chosen-border;
      outline: none;
      @include border-top-radius($chosen-border-radius);
      @include border-bottom-radius($chosen-border-radius);
      @include box-shadow($chosen-box-shadow);
      padding: .25rem 1rem .25rem .5rem;
      width: 100%;
    }
  }
  .chosen-drop {
    margin-top: -1px;
    @include border-bottom-radius($chosen-border-radius);
    background-clip: padding-box;
  }
}
.chosen-container-single-nosearch {
  .chosen-search {
    display: none;
  }
}
.chosen-container-multi {
  .chosen-choices {
    background-color: $chosen-background;
    border: $chosen-border;
    @include border-top-radius($chosen-multi-border-radius);
    @include border-bottom-radius($chosen-multi-border-radius);
    @include box-shadow($chosen-box-shadow);
    cursor: text;
    height: auto !important;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    li {
      float: left;
      list-style: none;
    }
    .search-field {
      margin: 0;
      padding: 0;
      white-space: nowrap;
      input[type="text"] {
        background: transparent !important;
        border: 0 !important;
        @include box-shadow(none);
        color: $chosen-placeholder-color;
        height: $chosen-multi-height;
        margin: 0;
        padding: 0 0 0 .75rem;
        outline: 0;
        width: 100% !important;
      }
      .default {
        color: $chosen-gray-light;
      }
    }
    .search-choice {
      background-clip: padding-box;
      position: relative;
      margin: .35rem 0 0 .5rem;
      padding: .25rem 1.5rem .25rem .25rem;
      border: $chosen-border;
      background-color: $chosen-gray-lightest;
      @include border-top-radius($chosen-border-radius);
      @include border-bottom-radius($chosen-border-radius);
      cursor: default;
      font-size: $font-size-sm;
      line-height: 1;
      color: $chosen-gray-dark;
      .search-choice-close {
        display: inline-block;
        position: absolute;
        top: .2rem;
        right: .125rem;
        width: 1rem;
        height: 1rem;
        cursor: pointer;
        background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-close-color}' d='#{$chosen-svg-close}'/></svg>");
        background-size: 1rem 1rem;
        background-position: center center;
        background-repeat: no-repeat;
        &:hover {
          background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-close-color-hover}' d='#{$chosen-svg-close}'/></svg>");
        }
      }
    }
    .search-choice-focus {
      background: $chosen-gray-lighter;
      .search-choice-close {
        background-position: right -11px;
      }
    }
  }
  .chosen-drop {
    .result-selected {
      display: none;
    }
  }
}
.chosen-container-active {
  .chosen-single {
    border: $chosen-focus-border;
    @include box-shadow($chosen-focus-box-shadow);
    @include transition($chosen-focus-transition);
  }
  &.chosen-with-drop .chosen-single {
    background-color: $input-bg;
    border: $chosen-focus-border;
    @include border-bottom-radius(0);
    @include box-shadow($chosen-focus-box-shadow);
    @include transition($chosen-focus-transition);
    div {
      &:after {
        display: inline-block;
        position: relative;
        top: .25rem;
        left: -1rem;
        width: 2rem;
        height: 2rem;
        content: "";
        background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-color}' d='#{$chosen-svg-up}'/></svg>");
        background-size: 2rem 2rem;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }
  }
  .chosen-choices {
    border: $chosen-focus-border;
    @include border-bottom-radius(0);
    @include box-shadow($chosen-focus-box-shadow);
    @include transition($chosen-focus-transition);
    .search-field input[type="text"] {
      color: $chosen-gray-dark !important;
    }
  }
  &.chosen-with-drop .chosen-choices {
    @include border-bottom-radius(0);
  }
  &.chosen-with-drop {
    .chosen-search-input {
      display: inline-block;
    }
  }
}
.chosen-disabled {
  cursor: default;
  opacity: .5 !important;
  .chosen-single {
    cursor: default;
  }
  .chosen-choices .search-choice .search-choice-close {
    cursor: default;
  }
}
.chosen-container-optgroup-clickable {
  li {
    &.group-result {
      text-transform: none !important;
      &:hover {
        background-color: $link-color;
        color: white;
        cursor: pointer;
      }
    }
  }
}
.chosen-container {
  &.is-valid,
  &:valid {
    .chosen-single,
    .chosen-choices,
    .chosen-drop {
      border-color: $chosen-success;
    }
  }
  &.is-invalid,
  &:invalid {
    .chosen-single,
    .chosen-choices,
    .chosen-drop {
      border-color: $chosen-danger;
    }
  }
}
input[type="text"].chosen-focus-input {
  position: absolute;
  top: -9000px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  @include box-shadow(none);
  outline: 0;
}
.input-group {
  &:nth-of-type(1) {
    .chosen-container {
      .chosen-choices {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
  &:not(:nth-of-type(1)) {
    .chosen-container {
      .chosen-choices {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
    .input-group-prepend {
      .input-group-text {
        border-top-right-radius: $input-border-radius;
        border-bottom-right-radius: $input-border-radius;
      }
    }
  }
  .chosen-container {
    position: relative;
    flex: 1 1 auto;
    width: 1% !important;
  }
}