@import "../../style/themes/default";
@import "../../style/mixins/beautifulScrollBar";
@import "../../style/mixins/text";
@top-height: 260px;
@user-size: 40px;
@user-select: ~"ta-user-select";

.@{user-select} {
  /*tag 样式*/
  &-with-tag {
    .ant-select-selection__choice,.ant-select-selection-selected-value { display: none!important; }
    .ant-tag { margin: 3px 8px 3px 0!important; height: 32px; line-height: 32px; font-size: 14px; }
  }

  /*modal框 样式*/
  &-modal {
    .pd-20 { padding: 20px; }
    .btn-close { position: absolute; top: 0; right: 0; width: 56px; height: 56px; text-align: center; line-height: 56px; cursor: pointer; }
    .close-color { color: @text-color-secondary; font-size: 16px; font-weight: 700; }
    .btn-close:hover { .close-color { color: @black; } }
    .box { border: solid 1px #eaeaea; border-radius: 5px; box-sizing: border-box; padding: 9px 10px; height: @top-height; overflow-y: hidden; }
    .search-box { width: 100%; box-sizing: border-box; position: relative; margin-bottom: 10px; }
    .icon-color { color: #c0c4cc; }
    .tree-box { .beautifyScrollbar(); height: @top-height - 72px; overflow-y: auto; }
    .show-user { border-top: solid 5px #e8e8e8; height: 200px; padding: 0 20px; overflow: hidden; }
    .user-select-head-content { height: 30px; line-height: 30px; text-align: right; }
  }

  /*单条用户信息样式*/
  &-modal .user-box {
     height: @user-size; line-height: @user-size; box-sizing: content-box; padding: 10px 5px; white-space:nowrap; overflow: hidden; .user-select(); cursor: pointer;
    .user-head { position: relative; display: inline-block; width: @user-size; height: @user-size; border-radius: 100%; background-color: #95a5a6; text-align: center; line-height: @user-size; color: #fff; font-size: 16px; margin-right: 4px; vertical-align: top }
    .user-head.woman { background-color: #f39c12; }
    .user-head.man { background-color: #419ff4; }
    .user-info { display: inline-block; width: calc(100% - 50px); height: @user-size; }
    .user-info > span { display: inline-block; width: 100%; height: @user-size; overflow: hidden; }
    .user-p { color: #666; height: @user-size/2; line-height: @user-size/2; font-size: 13px; .text-overflow(); }
    .user-tooltip { font-size: 12px; }
    .mg-r6 { margin-right: 6px; }
  }

  /*右侧用户选择面板*/
  &-modal .show-user-list {
    .user-box:hover .user-head:after,.user-active:after {
      content: '';
      background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='user-add' width='1em' height='1em' fill='%23ffffff' aria-hidden='true' class=''%3E%3Cpath d='M678.3 642.4c24.2-13 51.9-20.4 81.4-20.4h.1c3 0 4.4-3.6 2.2-5.6a371.67 371.67 0 0 0-103.7-65.8c-.4-.2-.8-.3-1.2-.5C719.2 505 759.6 431.7 759.6 349c0-137-110.8-248-247.5-248S264.7 212 264.7 349c0 82.7 40.4 156 102.6 201.1-.4.2-.8.3-1.2.5-44.7 18.9-84.8 46-119.3 80.6a373.42 373.42 0 0 0-80.4 119.5A373.6 373.6 0 0 0 137 888.8a8 8 0 0 0 8 8.2h59.9c4.3 0 7.9-3.5 8-7.8 2-77.2 32.9-149.5 87.6-204.3C357 628.2 432.2 597 512.2 597c56.7 0 111.1 15.7 158 45.1a8.1 8.1 0 0 0 8.1.3zM512.2 521c-45.8 0-88.9-17.9-121.4-50.4A171.2 171.2 0 0 1 340.5 349c0-45.9 17.9-89.1 50.3-121.6S466.3 177 512.2 177s88.9 17.9 121.4 50.4A171.2 171.2 0 0 1 683.9 349c0 45.9-17.9 89.1-50.3 121.6C601.1 503.1 558 521 512.2 521zM880 759h-84v-84c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v84h-84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h84v84c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-84h84c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
      position: absolute; width: @user-size; height: @user-size; border-radius: 100%; left: 0; top: 0; font-size: 20px; }
    .no-data { width: 100%; line-height: 180px; text-align: center; color: #999;  }
    .no-data-icon { vertical-align: middle; font-size: 32px; margin-right: 10px; }
    .user-list { height: 210px; overflow-y: auto; .beautifyScrollbar() }
    .more-box { height: 60px; line-height: 60px; }
    .no-child { height: 240px }
  }

  /*底部用户选择面板*/
  &-modal .chosed-person {
    .chosed-title { height: 40px; line-height: 40px; }
    .user-box:hover .user-head:after {
      content: '';
      background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='user-delete' width='1em' height='1em' fill='%23ffffff' aria-hidden='true' class=''%3E%3Cpath d='M678.3 655.4c24.2-13 51.9-20.4 81.4-20.4h.1c3 0 4.4-3.6 2.2-5.6a371.67 371.67 0 0 0-103.7-65.8c-.4-.2-.8-.3-1.2-.5C719.2 518 759.6 444.7 759.6 362c0-137-110.8-248-247.5-248S264.7 225 264.7 362c0 82.7 40.4 156 102.6 201.1-.4.2-.8.3-1.2.5-44.7 18.9-84.8 46-119.3 80.6a373.42 373.42 0 0 0-80.4 119.5A373.6 373.6 0 0 0 137 901.8a8 8 0 0 0 8 8.2h59.9c4.3 0 7.9-3.5 8-7.8 2-77.2 32.9-149.5 87.6-204.3C357 641.2 432.2 610 512.2 610c56.7 0 111.1 15.7 158 45.1a8.1 8.1 0 0 0 8.1.3zM512.2 534c-45.8 0-88.9-17.9-121.4-50.4A171.2 171.2 0 0 1 340.5 362c0-45.9 17.9-89.1 50.3-121.6S466.3 190 512.2 190s88.9 17.9 121.4 50.4A171.2 171.2 0 0 1 683.9 362c0 45.9-17.9 89.1-50.3 121.6C601.1 516.1 558 534 512.2 534zM880 772H640c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z'%3E%3C/path%3E%3C/svg%3E") center no-repeat!important;
      position: absolute; width: @user-size; height: @user-size; border-radius: 100%; left: 0; top: 0; font-size: 20px; }
    .chosed-btn { cursor: pointer; .user-select(); }
    .chosed-box { width: 100%; height: 155px; overflow-y: auto; .beautifyScrollbar(); }
    .self-col-5 { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 20%; float: left; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; }
  }
}