@import './theme/index.less';
@import './mixins/config.less';

@table-prefix-name: ~'@{namespace}-table';
@tag-prefix-name: ~'@{namespace}-tag';
@table-stripe-name: ~'@{table-prefix-name}@{element-separator}stripe';
@table-empty-name: ~'@{table-prefix-name}@{element-separator}empty';
@table-empty-icon-name: ~'@{table-prefix-name}-ico@{element-separator}empty';

.@{table-prefix-name} {

  .flex {
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .word-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow:hidden;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
  }
  
  .el-table {
    border-radius: @border-radius-base;
    background-color: @white;
    font-size: @font-size-base;
    .setFont(@font-medium, @line-height-lg-0, @color-text-dark01);

    th {
      padding: 0;
      > .cell {
        padding: 20px 16px;
        .setFont(@font-bold, @line-height-base, @color-text-dark);
        word-break: break-word;
      }
    }

    tr {
      border-bottom-color: @black-3;
    }

    td {
      padding: 12px 0;
      > .cell {
        display: flex;
        align-items: center;
        padding: 0 16px;
        line-height: @line-height-lg-0;
      }
    }

    .onestop-icon  {
      width: 34px;
      height: 34px;
      cursor: pointer;
      margin-right: 4px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .el-pagination {
    color: @color-text-regular;
    background-color: @black-4;
    padding-top: 15px;
    .btn-next, .btn-prev, button:disabled {
      background-color: @black-4;
    }
    button:hover {
      color: inherit;
    }
  }
  .el-pager li {
    background-color: @black-4;
    font-size: @font-size-sm;
    font-family: @font-medium;
    &.active, &:hover {
      color: @tag-color-dark-success;
    }
  }

  .el-input.is-active .el-input__inner, .el-input__inner:focus {
    border-color: @tag-color-dark-success;
  }

  .el-pagination__jump {
    font-size: @font-size-base;
    .setFont(@font-medium, @line-height-lg-0, @color-text-dark01);
  }

  .@{table-stripe-name} {
    tr:nth-child(2n) {
      background-color: @white;
    }
    tr:nth-child(2n + 1) {
      background-color: @bg-color;
    }
    &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
      background-color: @white;
    }
  }

  .@{table-empty-name} {

  }
  .el-table__empty-text {
    .onestop-icon {
      width: 280px;
      height: 280px;
      margin-right: 0;
    }
    .text {
      padding-bottom: 20px;
    }
  }
}

.setFont (@fontFamily, @lineHeight, @color) {
  font-family: @fontFamily;
  line-height: @lineHeight;
  color: @color;
}