@import "../common/variables.less";


.@{stbui}table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  font-size: @font-size-small;
  //font-family: @font-family-yahei;
  font-family: "Arial", "SimSun", sans-serif;

  thead tr th,
  thead tr td,
  tbody tr td{
    padding: 7px;
  }

  thead tr th,
  thead tr td {
    text-align: center;
    border-bottom: 1px solid @table-border-color;
    .nowrap();
  }

  tbody tr:nth-child(even) {
    background: #f5f5f5;
  }

  tbody tr td {
    text-align: center;
  }

  &-hover {
    tbody tr:hover {
      background-color: @table-border-color;
    }
  }

  &-border {
    border: 1px solid @table-border-color;

    thead {
      th,
      td {
        color: #333;
        line-height: 1.4;
        padding: 5px;
      }
    }

    th,
    td {
      border: 1px solid @table-border-color;
    }
  }

}


.table-theme-variant(default, @brand-default);
.table-theme-variant(primary, @brand-primary);

.table-theme-variant(@state;@background) {
  .@{stbui}table-hover tbody tr {
    td.@{state}:hover,
    &.@{state}:hover td,
    &:hover .@{state} {
      background-color: lighten(@background, 40%);
    }

  }

  .@{stbui}table tbody tr {
    td.@{state},
    &.@{state} td {
      background-color: lighten(@background, 40%);
    }
  }

  .@{stbui}table-@{state} {
    border: 1px solid @background;

    thead {
      th,
      td {
        background-color: lighten(@background, 40%);
      }
    }

    th,
    td {
      border: 1px solid @background;
    }
  }
}