
@import "../../scss/theme/config";

.cd-dropInput-el {
  position: relative;
  @include boxSizing(border-box);
  background: $colorContainerBg;
  border: 1px solid $inputSearchColor;
  border-radius: 2px;
  outline: 0;
  color: $colorDark;
  &:hover {
    border-color: $inputHoverColor;
  }
  .cd-dropInput-name {
    @include flexBox();
    @include flexCenterBox();
    position: relative;
    padding: 0 10px;
    height: 100%;
    cursor: pointer;
    justify-content: left;
    .cd-dropInput-name-text {
      @include ellipse();
      width: calc(100% - 30px);
    }

    .cd-component-black-arrow {
      @include transition(transform, .2s, linear);
      position: absolute;
      right: 12px;
      top: 50%;
      margin-top: -3px;
    }
    &.active {
        .cd-component-black-arrow {
          transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
        }
    }
  }

}

.cd-dropInput-select {
  position: absolute;
  width: 300px;
  top: 0;
  left: 0;
  box-shadow: 4px 4px 28px #888;
  border-radius: 10px;
  overflow: hidden;
  background-color: white;
  z-index: 101;
  display: none;
  .d-search-input {
    position: relative;
    margin: 10px;
    height: 28px;
    border: 1px solid #dddddd;
    border-radius: 7px;
    input {
      display: block;
      width: 100%;
      height: 100%;
      text-indent: 10px;
      background: transparent;
      outline: none;
      border: 0px;
    }
    i {
      position: absolute;
      right: 11px;
      top: 6px;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
  .d-list {
    max-height: 300px;
    overflow-y: auto;
    &::-webkit-scrollbar-track {
      background-color: #F5F5F5;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    }

    ul {
      //max-height: 250px;
      li {
        padding: 0 10px;
        height: 30px;
        text-align: left;
        line-height: 30px;
        color: #3e4556;
        font-size: 12px;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        label{
          cursor: pointer;
        }
        &:hover{
          background: $selectHoverColor;
          color:$colorBtnHover;
        }
      }
    }
  }

}