@import '../../base/bootstrap-extended/include'; // Bootstrap includes
@import '../../base/components/include'; // Components includes

.vs__dropdown-menu {
  box-shadow: 0 4px 24px 4px rgba($black, 0.2) !important; // this according to vue version
}
/* 滚动条整体部分 */
.vs__dropdown-menu::-webkit-scrollbar
{
  width: 10px;
  height: 10px;
}
/* scroll轨道背景 */
.vs__dropdown-menu::-webkit-scrollbar-track
{
  //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  //border-radius: 10px;
  background-color: transparent;
}

/* 滚动条中能上下移动的小块 */
.vs__dropdown-menu::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: rgba($primary, .15);
}

.vs__selected-options {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  input::placeholder {
    color: $input-placeholder-color !important;
  }
}

.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__open-indicator,
.vs--disabled .vs__clear,
.vs--disabled .vs__search{
  background-color: $input-disabled-bg !important;
}

.vs__dropdown-toggle {
  border: none !important;
  background-color: $input-bg !important;
}

/* 解决下拉文字过长导致的换行 */
[dir=ltr] .vs--single .vs__dropdown-toggle {
  height: $input-height;
  line-height: $input-height;
  border: none;
  background-color: $input-bg;
  &:focus,
  &:active {
    background-color: $input-focus-bg;
  }
}

.vs--open .vs__dropdown-toggle{
  background-color: $input-focus-bg;
}

.vs__clear {
  svg {
    color: #333;
  }
}

.vs--disabled .vs__selected {
  color: #fff !important;
  background-color: $primary !important;
}
.dark-layout {
  .vs--disabled .vs__dropdown-toggle,
  .vs--disabled .vs__open-indicator,
  .vs--disabled .vs__clear,
  .vs--disabled .vs__search{
    background-color: $theme-dark-input-bg !important;
    opacity: 0.5;
  }
  .vs--disabled .vs__selected {
    color: $theme-dark-body-color !important;
    background-color: rgba($primary,.1) !important;
  }
  .vs__dropdown-toggle {
    border: none !important;
    background-color: $theme-dark-input-bg !important;
  }
  .vs__selected-options {
    input::placeholder {
      color: $theme-dark-input-placeholder-color !important;
    }
  }
  /* 解决下拉文字过长导致的换行 */
  .vs--single .vs__dropdown-toggle {
    &:focus,
    &:active {
      background-color: $theme-dark-input-bg-focus !important;
    }
  }
  .vs__clear {
    svg {
      color: $theme-dark-body-color;
    }
  }
  .vs__dropdown-menu {
    box-shadow: $theme-dark-box-shadow !important; // this according to vue version
  }
}