$page-label-width:120px;
$page-content-min-width:1200px;
.semantics-edit-page{
  //overflow-x: scroll;
  .semantics-tool{
    display: flex;
    justify-content: space-between;
    min-width: $page-content-min-width;
    .tool-btn{
      height:40px;
      padding:10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      background-color: none;
      transition: background-color .3s;
      &:hover{
        background-color:#F5F7F9 ;
      }
      img{
        width:12px;
        height:12px;
        margin-right: 10px;
      }
    }
    .tool-btns{
      display: flex;
      .tool-btn{
        border-right:1px solid #DCDFE6;
        padding: 10px 30px;
        &:last-child{
          border-right: none;
          padding-left: 15px;
        }
        &:nth-child(3){
          border-right: none;
          padding-right: 15px;
        }
      }
    }
  }
  .semantics-content{
    margin-top:20px;
    min-width: $page-content-min-width;
    height: calc(100vh - 212px);
    background-color:transparent;
    border-radius: 4px;
    position: relative;
    .empty{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      text-align: center;
      color: #666666;
    }
    .file-page-label-wrap{
      background-color: #F5F7F9;
      width:100%;
      height: 30px;
      display: flex;
      overflow-x:hidden;
      .drag-cont {
        width: 100%;
        display: flex;
        flex-wrap:nowrap;
        transition: margin-left .3s;
      }
      .page-label{
        flex: 1;
        border:1px solid #DCDFE6;
        padding:4px 8px;
        width: $page-label-width;
        min-width: $page-label-width;
        background-color: transparent;
        color:#C0C4CC;
        border-bottom: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        &.active{
          background-color: #FFFFFF;
          color:#666666;
        }
        span{
          flex: 1;
          &.close{
            flex: none;
            margin-left: auto;
            width:14px;
            font-size: 12px;
          }
        }
      }
    }
    .files{
      display: flex;
      justify-content: space-between;
      width:100%;
      height: calc(100vh - 242px);
      border: 1px solid #DCDFE6;
      border-top: none;
      .file-item{
        width:32%;
        height: 100%;
        background-color: white;
        overflow-y: scroll;
        padding:30px 48px 30px 52px;
        &.couple{
          width:48%;
        }
        &.single{
          width: 100%;
        }
        .file-item-info{
          display: flex;
          position:relative;
          flex-direction: column;
          justify-content: center;
          color: #666666;
          text-align: center;
          .file-title{
            font-size: 18px;
            font-weight: bold;
            color:#333333;
            text-align: center;
            margin-bottom: 10px;;
          }
          .file-sub-info{
            text-align: start;
          }
          .close-btn{
            position:absolute;
            top:-14px;
            right:-28px;
            width:14px;
            height:14px;
            color:#C0C4CC;
            cursor: pointer;
            &:hover{
              color:#409EFF;
            }
            i{
              font-size: 14px;
            }
          }
        }
        .file-item-content{
          position:relative;
          margin-top: 30px;
          //搜索高亮
          ::highlight(search-results) {
            background-color: #FFDF0C;
          }
          //划词高亮
          ::highlight(select-results){
            color:white;
            background-color: rosybrown;
          }
          //标签-我的+历史 高亮
          ::highlight(label-choosed-mine){
              color:white;
              background-color: green;
          }
          //标签-他人 高亮
          ::highlight(show-result-other){
            text-decoration:underline;
          }
          //测试回显
          ::highlight(show-result){
              background-color: #B3D8FF;;
          }
          .file-item-block{
            min-height: 55px;
            width: 100%;
            position: relative;
            background-color: transparent;
            word-break: break-all;
            cursor: pointer;
            /* user-select: none; */
            /* z-index: 5; */
            padding:0 10px;
            transition: background-color .3s;
            &:hover{
              background-color: #ECF5FF;
            }
            &.this-block{
              background-color: #FFECEC;
            }
            &.select-block{
              text-decoration:underline;
            }
            .file-item-icon{
              position:absolute;
              left:-28px;
              top:0px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              user-select: none;
              span{
                padding:5px;
                overflow: hidden;
                &.label{
                  top:30px;
                }
                &:hover{
                  img{
                    transform:translateX(30px);
                    filter:drop-shadow(#409EFF -30px 0px 0px);
                  }
                }
                img{
                  display: block;
                  width:15px;
                  height:15px;
                }
              }
            }
          }
        }
      }
    }
  }
}