@raw-table-class: ~'@{icecream-prefix}-raw-table';

.@{raw-table-class} {
  .extendBaseEnhanced();
  width: 100%;
  .setFontSize(@icecream-font-size-main);
  text-align: left;
  // 不用 collapse 是因为
  // https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
  border-collapse: separate;
  border-spacing: 0;

  th, td {
    // 需要和 getPaddingBySize 保持同步
    padding: @icecream-gap-md @icecream-gap-md-x;
    vertical-align: middle;
  }

  &&-size-small {
    .setFontSize(@icecream-font-size-sm);
  
    th, td {
      padding: @icecream-gap-sm @icecream-gap-md-x;
    }
  }

  thead tr {
    font-weight: @icecream-bold;
    background: @icecream-color-grey-3;
  }

  tbody tr {
    background-color: @icecream-color-grey-1;
    &:hover {
      // important 覆盖斑马纹的灰色底色
      background: #F2FBFE !important;
    }
  }
}

.@{raw-table-class}-border {
  &-row {
    th, td {
      border-bottom: 1px solid @icecream-color-grey-5;
    }
  }
  &-full {
    border-top: 1px solid @icecream-color-grey-5;
    border-left: 1px solid @icecream-color-grey-5;
    th, td {
      border-bottom: 1px solid @icecream-color-grey-5;
      border-right: 1px solid @icecream-color-grey-5;
    }
  }
}

.@{raw-table-class}-zebra {
  tbody tr:nth-child(2n) {
    background: @icecream-color-grey-2;
  }
}