.wrapperCommonTable {
  table{
    tr{
      .checkbox{
        background-image: linear-gradient(#e8eaec,#e8eaec);
        background-repeat: no-repeat;
        background-size: 100% 1px;
        background-position: 100% 100%;
      }

      th.thead-th--column{
        white-space: pre-line;
        word-break: break-all;
        padding-left: 5px;
        padding-right: 5px;
      }

      th.fix--hidden{
        visibility: hidden;
      }

      td.fix--hidden{
        visibility: hidden;
      }

      // .lion-td-btn{
      //   margin-right:5px;
      //   border-color:transparent;
      //   color:#3582fb;
      //   background:transparent;
      //   font-size:12px;
      //   cursor: pointer;;
      //   padding:9px 15px;
      //   padding-left:0px;
      //   padding-right:0px;
      // }

      // 折叠按钮样式
      .lion-table-cell-btn{
        .ant-popover-inner-content{
            display: flex;
            flex-direction: column;
            border-radius: 4px;
            padding: 6px 8px;
            &>button{
              :hover{
                background: #ebf3ff !important;
                color:#5b9bfc !important;
              }
            }
        }
      }
    }

    .lion-cell--fix--left{
      position: sticky;
      left: 0;
      z-index: 2;
    }

    .lion-cell--fix--right{
      position: sticky;
      right: 0;
      z-index: 2;
      .lion-cell--fix--right--cell{
        display: inline-block;
        overflow: hidden;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 12px;
      }
    }

    .fix-left-shadow{
      box-shadow: 4px 3px 4px 0 rgb(0 0 0 / 12%);
    }

    .fix-right-shadow{
      box-shadow:-4px 3px 4px 0 rgb(0 0 0 / 12%);
    }
  }
}

.wrapper-common--thead {
  @extend .wrapperCommonTable;
  table{
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border:0;
    color: #606266;
    font-weight: 600;
    thead.lion-table-header-thead{
    	tr{
    		height:40px;
        background-color:#fff !important;

        th.thead-th--column{
        /* 左侧固定表格表头th样式 */

          font-size: 12px;
          box-sizing: border-box;
          color: rgba(0, 0, 0, .85);
          padding: 3px 0!important;
          text-align: left;
          background-image: linear-gradient(#e8eaec,#e8eaec);
          background-repeat: no-repeat;
          background-size: 100% 1px;
          background-position: 100% 100%;
          background-color:inherit;

          .thead-th--cell{
            /* 左侧固定表格表头单元格样式 */

            box-sizing: border-box;
            display: block;
            white-space: nowrap;/*控制单行显示*/
            overflow: hidden;/*超出隐藏*/
            text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
            word-break: break-all;
            padding-left: 5px;
            padding-right: 5px;
          }


        }

        :last-child {
          border-right: 0;
        }
    	}
    }
  }
}

.wrapper-common--tbody{
  @extend .wrapperCommonTable;
  table{
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border:0;

    tbody.lion-table-body-tbody {

        tr.lion-tr--column--hide{

            font-size: 12px;
            background-color:rgb(238, 241, 246);
            td.tbody-td--column--hide{

                padding: 3px 0 !important;
                background-color: #eef1f6;
                text-align: left;
                white-space: nowrap;/*控制单行显示*/
                overflow: hidden;/*超出隐藏*/
                text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
                background-image: linear-gradient(#e8eaec,#e8eaec);
                background-repeat: no-repeat;
                background-size: 100% 1px;
                background-position: 100% 100%;
                border-bottom: 1px solid #e5e8f1;

                .td--column--hide--cell{
                  line-height:16px;
                  .td--column--hide--cell--container{
                    text-align:center;
                    padding:4px 0px;
                    .hide--cell--operation{
                      vertical-align: unset;
                      font-size: 12px;
                      color: #3582fb;
                      display: inline-flex;
                      flex-direction: row;
                      align-items: center;
                      justify-content: center;
                      position: relative;
                      text-decoration: none;
                      outline: none;
                      cursor: pointer;
                      padding: 0;
                      font-weight: 500;
                    }
                    .hide--cell--action{
                      background: none;
                      border:none;
                      &:hover{
                        background: none;
                        border:none;
                      }
                    }
                  }
                }


                .tbody-td--column--cell{
                    box-sizing: border-box;
                    display: block;
                    white-space: nowrap;/*控制单行显示*/
                    overflow: hidden;/*超出隐藏*/
                    text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
                    word-break: break-all;
                    padding-left: 10px;
                    padding-right: 10px;
                }

                span{
                    &:hover{
                        color: #5d9bfc !important;
                    }
                }

            }
            :last-child {
              border-right: 0;
          }
        }

        .tbody-tr--column--gray{
            background-color: #f6f6f6 !important;
        }

        tr.tr--hover{
            background-color: #f5f7fa !important;
        }

        tr.tbody-tr--column--common {

            td.tbody-td--column--surface--checkbox{
              text-align:center !important;
              width:50px;
              line-height:1;
              left:0;
              background-color:#f6f6f6;
            }

            td.tbody-td--column--surface--mainarea{
              height: 50px;
              line-height: 1;
              background-color: inherit;
            }

            td.tbody-td--column  {
                font-size: 13px;
                // height: 45px!important;
                box-sizing: border-box;
                // border-right: 1px solid #f0f0f0;
                color: #333;
                padding: 3px 0!important;
                text-align: left;
                white-space: nowrap;/*控制单行显示*/
                overflow: hidden;/*超出隐藏*/
                text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
                background-image: linear-gradient(#e8eaec,#e8eaec);
                background-repeat: no-repeat;
                background-size: 100% 1px;
                background-position: 100% 100%;



                .tbody-td--column--surface--hide{
                  display: inline-block;
                  overflow: hidden;
                  padding-left: 5px;
                  padding-right: 5px;
                  font-size: 12px;
                  height: 100%;
                }

                .tbody-td--column--cell{
                    box-sizing: border-box;
                    display: block;
                    white-space: nowrap;/*控制单行显示*/
                    overflow: hidden;/*超出隐藏*/
                    text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
                    word-break: break-all;
                    padding-left: 5px;
                    padding-right: 5px;
                    .subordinate--item{
                      width:20px;
                      display:inline-block;
                    }
                }

                .cell-action{
                    margin-right: 5px;
                    border-color: transparent;
                    color: #3582fb;
                    background: transparent;
                    font-size: 12px;
                    cursor: pointer;
                    padding: 9px 15px;
                    padding-left: 0;
                    padding-right: 0
                }

                .cell-action-btn{
                    margin-right: 5px;
                    border-color: transparent;
                    color: #3582fb;
                    background: transparent;
                    font-size: 12px;
                    cursor: pointer;
                    padding: 0px;
                    padding-left: 0;
                    padding-right: 0;
                    height: 20px;
                    line-height: 1.5;
                }
            }

            td.tbody-td--column--hide--checkbox{
                left: 0;
                text-align: center;
                width:50px;
                background: #eef1f6;
                height:45px;
                padding: 0px !important;
            }

            .tbody-td--cell--container{
                font-size: 12px;
                .lion-td--cell--container--label{
                    color:#999;
                }
            }

            td.tbody-td--opreation{
              // height:50px;
              background-color: inherit;
              line-height:1;
              .tbody-td--opreation--list{
                display:flex;
                align-items:center;
                justify-content:space-evenly;
                .antd-Button{
                  margin-right:5px;
                }
                .lion-cell-btn--ellipsis{
                  display: inline-block;
                  cursor: pointer;
                  padding: 0;
                  height: auto;
                  letter-spacing: 2px;
                  font-weight: 800;
                  transform: rotate(90deg);
                  color: #1890ff;
                  border: 0
                }
              }
            }

            :last-child {
              border-right: 0;
            }

            .checkbox{
                text-align: center !important;
            }
        }
    }
  }
}

.wrapper-common--surface--group{
  display: inline-block;
  overflow: hidden;
  margin-right:15px;
  font-size:12px;
  .surface-group-container{
      display:flex;
      height:100%;
      .surface-group-item{
          width: 100%;
          display: flex;
          align-items: center;
          height: 20px;
          .surface-group-item--label--btn{
              color:#999;
              height:20px;
              line-height:1.5;
          }
          .surface-group-item--label{
              color:#999;
          }
      }
  }
}