// 窄模式
// .@{ns}-RowDetail--narrow{
//   .styled-avatar{
//     justify-content: space-between !important;
//     &__field{
//       width: calc(50% - 5px) !important;
//       margin-right: 0 !important;
//       min-width:auto !important;
//       max-width: none !important;
//     }
//   }
// }
.@{ns}-StyleLib{

  .wrap-item{
    position: relative;
    flex: 0 0 auto;
    margin-bottom: 10px;
    display: flex;
    padding: 4px;
    cursor: pointer;
    align-items: center;
    transition: background-color .2s;
    border-radius: 30px;
    width: 100%;
    // height: 100%;
    // min-width: 120px;
    // max-width: 200px;
    // margin-right: 10px;
    &:hover{
      background-color: #e8f3ff;
    }
    &_icon{
      width: 30px;
      height: 30px;
      background-color: #e8e8e8;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;

      &>div{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        svg{
          width: 16px;
          height: 16px;
          fill: currentColor;
        }

        img{
          width: 100%;
          height: 100%;
        }

        &.multiavatar-avatar{
          width: 100%;
          height: 100%;

          svg{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    &_content{
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .wrap-item_title{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        color: #303030;
        font-weight: 500;
        &-empty{
          color: #909090;
        }
        .@{ns}-SelectControl{
          width: max-content;
        }
        .@{ns}-Select2-valueWrap{
          width: auto !important;
        }
        .is-quick-static{
          padding: 0;
          font-size: 15px;
          width: auto;
        }
      }
      .wrap-item_subTitle{
        line-height: 1;
        margin-top: 2px;
        display: inline-block;
        height: 15px;
        font-size: 12px;
        color: #909090;
        font-weight: 500;
      }
    }
    &_select{
      width: 100%;
      height: 100%;
      position: absolute !important;
      left: 0;
      top: 0;
      background-color: transparent !important;

      // &>div{
      //   height: 100%;
      // }
      .@{ns}-Select2{
        height: 100%;
        width: 100%;
        height: 100%;
        position: absolute !important;
        left: 0;
        top: 0;
        background-color: transparent !important;
        &.is-quick-edit{
          background-color: transparent !important;
          &:focus{
            box-shadow: none !important;
          }
          &:hover{
            background-color: transparent !important;
            box-shadow: none !important;
            border-color: transparent !important;

            .@{ns}-Select2-clear{
              display: none !important;
            }
          }
          &.is-opened,&.is-focused{
            border-color: transparent !important;
          }
        }
      }
      .@{ns}-Select2-valueWrap{
        opacity: 0;
      }
    }
    .@{ns}-Select2.is-quick-static{
      display: none;
    }
  }
}