@import '../common/var-nb.scss';
@import '../mixins/utils.scss';
@import '../mixins/mixins.scss';

/* search-select
 ----------------------------*/

@include b(search-select) {
    color: $--color-font-weight;
    font-size: $--size-font-mid;
    background: #fff;
    position: relative;
    width: 100%;
    cursor: pointer;
    .nb-search-select-box {
      height: 38px;
      line-height: 38px;
      padding-left: 15px;
      padding-right: 20px;
      min-width: 120px;
      width: 100%;
      position: relative;
      border: 1px solid $--color-border-weight;
      border-radius: 4px;
      .icon-nb-arrow {
        color: #c0c4cc;
        position: absolute;
        top: 50%;
        right: 10px;
        transition: all 0.3s;
        transform: translateY(-50%) rotate(180deg) ;
 
      }
      .icon-nb-arrow-up {
        transform: rotate(0deg) translateY(-50%);
      }
      
    }
}

@include b(search-select-board) {
  background: $--color-white;
  font-size: $--size-font-mid;
  color: $--color-font;
  text-align: left;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  bottom: -5px;
  transform: translateY(100%);
  max-height: 300px;
  z-index: 999;
  $topH: 68px;

  .search-top{
    height: 68px;
    padding: 18px 15px;
    .nb-input.el-input--mini .nb-button.nb-button-search{
      width: 44px;
    }
    .nb-input.el-input--mini .el-input__inner {
      border: 1px solid $--color-border-weight;
      height: 30px;
      &:focus{
        border-color:$--color-primary;
      }
    }
  }
  .search-options{
    overflow: auto;
    padding : 0 0 10px 0;
    border-top: 1px solid $--color-border-weight;
    li{
      padding-left: 15px;
      height: 32px;
      line-height: 32px;
      &:hover,
      &.is-active{
        background: $--color-background;
      }
    }
  }
}