@import 'vars';

// var
// =============================================================
$dropdown-header-padding: 8px 20px 6px !default;
$color-grey-arrow: rgba(204, 204, 204, .2);
$bootstrap-select-error-border: $state-danger-border;
$bootstrap-select-width: 220px; // 3 960px-grid columns
$bootstrap-select-notify-bg: $dropdown-link-hover-bg;
$bootstrap-select-notify-color: $dropdown-link-hover-color;
$bootstrap-select-notify-border: $border-color-base;
$bootstrap-select-no-result-bg: $dropdown-link-hover-bg;
$bootstrap-select-no-result-color: $dropdown-link-hover-color;
$bootstrap-select-show-menu-arrow: $dropdown-border-color;

// z-index
$zindex-select-dropdown: 1450; // must be lower than a modal background (1500) but higher than the fixed navbar (1400)
// for v4a-v4b;
$input-color-placeholder: $input-placeholder-color;
$dropdown-link-padding: $dropdown-item-padding-y $dropdown-item-padding-x;

// bootstrap-slect
// =============================================================

.btn-select {
  height: $input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: $padding-base-vertical $padding-base-horizontal;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $input-color;
  background-color: $input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid $input-border;
  border-radius: $input-border-radius;

  .btn-group.open &, &:focus {
    border-color: $input-focus-border-color !important;
    box-shadow: none;
  }
}

// Mixins
@mixin cursor-disabled() {
  cursor: not-allowed;
}

// Rules
select.bs-select-hidden, select.selectpicker {
  display: none !important;
}

.bootstrap-select {
  width: 220px \0; /*IE9 and below*/

  &.show {
    .open > .dropdown-menu {
      display: block;
    }
  }

  // The selectpicker button
  > .dropdown-toggle {
    z-index: 1;
    width: 100%;
    padding-right: 25px;

    &.bs-placeholder, &.bs-placeholder:hover, &.bs-placeholder:focus, &.bs-placeholder:active {
      color: $input-color-placeholder;
    }
  }

  .icon {
    @include icon-fixed-width();
  }

  > select {
    position: absolute !important;
    bottom: 0;
    left: 50%;
    display: block !important;
    width: .5px !important;
    height: 100% !important;
    padding: 0 !important;
    border: none;
    opacity: 0 !important;

    &.mobile-device {
      top: 0;
      left: 0;
      z-index: 2;
      display: block !important;
      width: 100% !important;
    }
  }

  // Error display
  .has-error & .dropdown-toggle, .error & .dropdown-toggle {
    border-color: $bootstrap-select-error-border;
  }

  &.fit-width {
    width: auto !important;
  }

  &:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: $bootstrap-select-width;
  }

  // .dropdown-toggle:focus {
  //   outline: thin dotted #333333 !important;
  //   outline: 5px auto -webkit-focus-ring-color !important;
  //   outline-offset: -2px;
  // }
}
// for bootstrapV3.x dropdown-menu style
// =====================================
.bootstrap-select {
  > .dropdown-toggle {
    &:after {
      display: none;
      margin: 0;
      border: none;
    }

    .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: .3em;
      vertical-align: middle;
      border-top: 4px solid;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      transition: .25s;
      transform: scale(1.001);
    }
  }

  &.dropup .caret {
    border-top: 0;
    border-bottom: 4px solid;
  }

  .dropdown-menu > li {
    padding: 0 5px;
    margin: 2px 0;
  }

  .dropdown-menu > .dropdown-header {
    padding: $dropdown-header-padding;
  }

  .dropdown-menu > li.divider {
    height: 1px;
    margin: 10px 0;
    overflow: hidden;
    background-color: $gray-200;
  }

  .dropdown-menu > li > a {
    display: block;
    padding: $dropdown-link-padding;
    font-weight: normal;
    line-height: $line-height-base;
    color: $dropdown-link-color;
    white-space: nowrap; // prevent links from randomly breaking onto new lines
    border-radius: $dropdown-item-border-radius;
    transition: background-color .25s;

    &:hover, &:focus {
      color: $dropdown-link-hover-color;
      text-decoration: none;
      background-color: $dropdown-link-hover-bg;
    }
  }

  // Active state
  .dropdown-menu > .active > a {
    &, &:hover, &:focus {
      color: $dropdown-link-active-color;
      text-decoration: none;
      background-color: $dropdown-link-active-bg;
      outline: 0;
    }
  }
  // disabled state
  .dropdown-menu > .disabled > a {
    &, &:hover, &:focus {
      color: $dropdown-link-disabled-color;
    }

    // Nuke hover/focus effects
    &:hover, &:focus {
      text-decoration: none;
      // @include reset-filter;
      cursor: $cursor-disabled;
      background-color: transparent;
      background-image: none; // Remove CSS gradient
    }
  }
}

.bootstrap-select.form-control {
  padding: 0;
  margin-bottom: 0;
  border: none;

  &:not([class*="col-"]) {
    width: 100%;
  }

  &.input-group-btn {
    z-index: auto;

    &:not(:first-child):not(:last-child) {
      > .btn {
        border-radius: 0;
      }
    }
  }
}

// The selectpicker components
.bootstrap-select.btn-group {
  &:not(.input-group-btn), &[class*="col-"] {
    display: inline-block;
    float: none;
    margin-left: 0;
  }

  // Forces the pull to the right, if necessary
  &, &[class*="col-"], .row &[class*="col-"] {
    &.dropdown-menu-right {
      float: right;
    }
  }

  .form-inline &, .form-horizontal &, .form-group & {
    margin-bottom: 0;
  }

  .form-group-lg &.form-control, .form-group-sm &.form-control {
    padding: 0;

    .dropdown-toggle {
      height: 100%;
      font-size: inherit;
      line-height: inherit;
      border-radius: inherit;
    }
  }

  // Set the width of the live search (and any other form control within an inline form)
  // see https://github.com/silviomoreto/bootstrap-select/issues/685
  .form-inline & .form-control {
    width: 100%;
  }

  &.disabled, > .disabled {
    @include cursor-disabled();

    &:focus {
      outline: none !important;
    }
  }

  &.bs-container {
    position: absolute;
    height: 0 !important;
    padding: 0 !important;

    .dropdown-menu {
      z-index: $zindex-select-dropdown;
    }
  }

  // The selectpicker button
  .dropdown-toggle {
    .filter-option {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-align: left;

      > .icon {
        margin-right: .3em;
      }
    }

    .caret {
      position: absolute;
      top: 50%;
      right: 12px;
      margin-top: -2px;
      vertical-align: middle;
    }
  }

  &[class*="col-"] .dropdown-toggle {
    width: 100%;
  }

  // The selectpicker dropdown
  .dropdown-menu {
    box-sizing: border-box;
    min-width: 100%;
    margin-top: 7px;

    &.inner {
      position: static;
      float: none;
      padding: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    li {
      position: relative;

      &.active small {
        color: $inverse;
      }

      &.disabled a {
        @include cursor-disabled();
      }

      a {
        cursor: pointer;
        user-select: none;
        > .icon {
          margin-right: .3em;
        }

        &.opt {
          position: relative;
          padding-left: 2.25em;
        }

        span.check-mark {
          display: none;
        }

        span.text {
          display: inline-block;
        }
      }

      small {
        padding-left: .5em;
      }
    }

    .notify {
      position: absolute;
      bottom: 6px;
      box-sizing: border-box;
      width: 94%;
      min-height: 26px;
      padding: 3px 5px;
      margin: 0 3%;
      color: $bootstrap-select-notify-color;
      pointer-events: none;
      background-color: $bootstrap-select-notify-bg;
      border: 1px solid $bootstrap-select-notify-border;
      border-radius: $dropdown-item-border-radius;
      box-shadow: inset 0 1px 1px rgba(rgb(0, 0, 0), (5/100));
      opacity: .9;
    }
  }

  .no-results {
    padding: 5px 10px;
    margin: 0 8px;
    color: $bootstrap-select-no-result-color;
    white-space: nowrap;
    background-color: $bootstrap-select-no-result-bg;
    border-radius: $dropdown-item-border-radius;
  }

  &.fit-width .dropdown-toggle {
    .filter-option {
      position: static;
    }

    .caret {
      position: static;
      top: auto;
      margin-top: -1px;
    }
  }

  &.show-tick .dropdown-menu li {
    &.selected a span.check-mark {
      position: absolute;
      right: 15px;
      display: inline-block;
      margin-top: 5px;
    }

    a span.text {
      margin-right: 34px;
    }
  }
}

.bootstrap-select.show-menu-arrow {
  &.open > .dropdown-toggle {
    z-index: ($zindex-select-dropdown + 1);
  }

  .dropdown-toggle {
    &:before {
      position: absolute;
      bottom: -9px;
      left: 9px;
      display: none;
      content: "";
      border-right: 8px solid transparent;
      border-bottom: 8px solid $bootstrap-select-show-menu-arrow;
      border-left: 8px solid transparent;
    }

    &:after {
      position: absolute;
      bottom: -9px;
      left: 10px;
      display: none;
      content: "";
      border-right: 7px solid transparent;
      border-bottom: 7px solid white;
      border-left: 7px solid transparent;
    }
  }

  &.dropup .dropdown-toggle {
    &:before {
      top: -8px;
      bottom: auto;
      border-top: 8px solid $bootstrap-select-show-menu-arrow;
      border-bottom: 0;
    }

    &:after {
      top: -8px;
      bottom: auto;
      border-top: 7px solid white;
      border-bottom: 0;
    }
  }

  &.float-right .dropdown-toggle {
    &:before {
      right: 12px;
      left: auto;
    }

    &:after {
      right: 13px;
      left: auto;
    }
  }

  &.open > .dropdown-toggle {
    &:before, &:after {
      display: block;
    }
  }
}

.bs-searchbox, .bs-actionsbox, .bs-donebutton {
  padding: 4px 8px;
}

.bs-actionsbox {
  box-sizing: border-box;
  width: 100%;

  & .btn-group button {
    width: 50%;
  }
}

.bs-donebutton {
  box-sizing: border-box;
  float: left;
  width: 100%;

  & .btn-group button {
    width: 100%;
  }
}

.bs-searchbox {
  & + .bs-actionsbox {
    padding: 0 8px 4px;
  }

  & .form-control {
    float: none;
    width: 100%;
    margin-bottom: 0;
  }
}


// fix bootstrap-select class .pull-left unworking
// class="filter-option pull-left"
.filter-option.pull-left {
  float: left !important;
}

// method 2
// give btn height
// .bootstrap-select > .btn {
//   height: $input-height;
// }