@include b(grid) {
  @include set-component-css-var('grid', $grid);
  @include set-component-css-var('grid-header', $grid-header);
  @include set-component-css-var('grid-content', $grid-content);
  @include set-component-css-var('grid-page', $grid-page);

  height: 100%;
  padding: getCssVar('grid', 'padding');
  background-color: getCssVar('grid', 'bg-color');

  @include b(grid-content) {
    height: calc(100% - getCssVar('grid-page', 'height'));

    .ivu-table {
      // grid header
      .ivu-table-header {
        height: getCssVar('grid-header', 'height');
        overflow: hidden;

        > table {
          height: 100%;
          color: getCssVar('grid-header', 'text-color');

          .ivu-table-cell {
            width: 100%;
            @include utils-ellipsis;
          }
        }
      }

      // grid content
      .ivu-table-body {
        height: calc(100% - getCssVar('grid-header', 'height'));
        overflow-y: auto;

        > table {
          color: getCssVar('grid-content', 'text-color');

          // 高亮
          .ivu-table-row-highlight td {
            background-color: getCssVar(
              'grid-content',
              'item-highlight-bg-color'
            );
          }

          // 悬浮
          .ivu-table-row-hover td {
            background-color: getCssVar('grid-content', 'item-hover-bg-color');
          }
        }
      }

      &::before {
        z-index: auto;
      }
    }
  }

  @include b(grid-page) {
    height: getCssVar('grid-page', 'height');
    @include flex(row, flex-end);

    padding: getCssVar('grid-page', 'padding');
  }
}
