.#{$cascading-picker-prefix-cls}{
  width: $cascading-width;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: $gray-light-65;
  font-size: $cascading-font-size;
  position: relative;
  display: inline-block;
  background-color: $white;
  @include border-radius($border-radius);
  &.#{$cascading-picker-prefix-cls}-lg {
    font-size: $cascading-font-size-lg;
    input{
      height: 40px;
      padding: 6px 11px;
      font-size: $cascading-font-size-lg;
    }
    i{
      top:10px;
      font-size: $cascading-font-size-lg;
      &.#{$icon-prefix}-close-circle{
        top:9px;
      }
    }
  }
  &.#{$cascading-picker-prefix-cls}-sm {
    font-size: $cascading-font-size-sm;
    input{
      height: 24px;
      padding: 1px 7px;
      font-size: $cascading-font-size-sm;
    }
    i{
      top:4px;
      font-size: $cascading-font-size-sm;
      &.#{$icon-prefix}-close-circle{
        top:3px;
      }
    }
  }
  i{
    position: absolute;
    right: 8px;
    top:6px;
    font-size: $cascading-font-size;
    color:$gray-light-65;
    transition: all .2s;
    transform: rotate(0deg);
    &.#{$icon-prefix}-close-circle{
      top:6px;
      color:$gray-light-25;
    }
  }
  &.#{$cascading-prefix-cls}-open{
    .#{$icon-prefix}-chevron-down-outline{
      transform: rotate(180deg)
    }
  }
  &-label{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 20px;
    margin-top: -10px;
    padding: 0 12px;
    overflow: hidden;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  input{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 4px 11px;
    cursor: pointer;
    outline: none;
    margin: 0;
    color: $gray-light-65;
    font-size: $cascading-font-size;
    background: none;
    border: 1px solid $gray-light-15;
    @include border-radius($border-radius);
    &.focusing{
      border-color: $brand-primary;
      border-width: 2px;
    }
    &.focus{
      border-color: $brand-primary;
    }
    &::-webkit-input-placeholder{
      color: $gray-light-25
    }
  }
}

.#{$cascading-menus-prefix-cls}{
  position: absolute;
  font-size: $cascading-font-size;
  white-space: nowrap;
  background: $white;
  @include border-radius($border-radius);
  box-shadow: 0 2px 8px $gray-light-15;
  .#{$cascading-prefix-cls}-search-list{
    display: inline-block;
    max-height: 180px;
    overflow-y: auto;
    .#{$cascading-prefix-cls}-menuitem{
      width: 100%;
      padding: 5px 12px;
      line-height: 22px;
      white-space: nowrap;
      cursor: pointer;
    }
    .no-match{
      width: 100%;
      text-align: center;
      padding: 10px 0;
    }
  }
}

.#{$cascading-popver-content-prefix-cls}{
  display: flex;
  justify-content: space-between;
  .#{$multiCascader-multil-content-prefix-cls} {
    display: inline-block;
    height: 180px;
    overflow-y: auto;
    border-right: 1px solid $gray-light-9;
    &:last-child{
      border-right: none;
    }
    ul{
      padding: 0;
      margin: 0;
      li{
        position: relative;
        list-style-type: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 5px 44px 5px 12px;
        line-height: 22px;
        white-space: nowrap;
        cursor: pointer;
        color:$gray-light-65;
        &.active{
          background-color: $gray-light-4;
          color:$gray-light-85;
          font-weight: bolder;
        }
        i{
          position: absolute;
          font-size: $cascading-font-size-sm;
          right: 12px;
          top: 6px;
        }
        &:hover {
          background-color: $brand-primary-10;
        }
        &.active {
          &:hover {
            background-color: $gray-light-4;
          }
        }
        &.disabled{
          color: $gray-light-25;
          cursor: not-allowed;
          &:hover {
            background: none;
          }
        }
      }
    }
  }
}