@import './area-picker.less';
@import './areas-pop.less';
@import './area-search.less';
.ks-area-select-multi {
  position: relative;
  height: 100%;
  overflow: hidden;
  .titleWrap {
    width: 100%;
    height: 28px;
    margin-top: 52px;
    margin-left: 16px;
    .word {
      display: inline-block;
      font-size: 18px;
      display: flex;
      align-items: center;
      .icon {
        width: 20px;
        height: 20px;
        display: inline-block;
      }
    }
  }
  .formItem-input {
    height: 24px;
    margin: 10px 0;
    color: #888ea6;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    overflow: hidden;
    padding: 0 0 0 16px;
    line-height: 24px;
    .van-overlay {
      height: 100vh !important;
    }
    .formItem-input-content {
      position: relative;
      -webkit-overflow-scrolling: unset;
      .van-dropdown-menu {
        position: absolute;
        z-index: 999;
        height: 36px;
        width: 58px;
        top: -6px;
        right: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 12%, #ffffff 35%);
        .van-dropdown-menu__title {
          &::after {
            display: none;
          }
          .van-ellipsis {
            .nav-item {
              position: relative;
              width: 10px;
              height: 18px;
              img {
                width: 10px;
                height: 5px;
                position: absolute;
                top: 7px;
                left: 0;
              }
            }
          }
        }
        .van-dropdown-menu__bar {
          height: 36px;
        }
        .arrow-down-icon-active {
          display: none;
        }
        .van-dropdown-item--down {
          border-radius: 0;
        }
        .van-dropdown-item__content {
          border-radius: 0 0 12px 12px;
          border-start-end-radius: 0;
          border-start-start-radius: 0;
          max-height: unset !important;
          border-end-end-radius: 20px;
          border-end-start-radius: 20px;
        }
      }
      .area-pop-tip {
        color: #03050d;
        font-size: 12px;
      }
      .formItem-input-content-tags {
        overflow-x: auto;
        width: calc(100% - 40px);
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
    .formItem-input-value {
      color: #7972fe;
      font-size: 12px;
      width: max-content;
      .txtItem {
        display: inline-block;
        background: #f1f0fe;
        color: #7972fe;
        border-radius: 4px;
        padding: 6px 28px 6px 12px;
        margin-left: 8px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        line-height: 12px;
        position: relative;
        .van-icon {
          position: absolute;
          padding: 6px;
          right: 0;
          top: 0;
        }
        &:first-child {
          margin-left: 0px;
        }
      }
    }
  }
  .ks-area-picker-wrap {
    position: relative;
    width: 100%;
    height: calc(100% - 145px);
  }
  .bot-btn-wrap {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 10px 16px;
    .van-button {
      width: 50%;
      height: 36px;
      line-height: 34px;
      border-radius: 6px !important;
    }
    .van-button--primary {
      margin-left: 6px;
    }
    .van-button--plain {
      margin-right: 6px;
      margin-left: 0;
    }
  }
}
