@import '../../styles/default.scss';

// .#{$pkg-prefix}-data-grid-wrap {

// }

.#{$pkg-prefix}-data-grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  & > .ant-spin-nested-loading,
  & > .ant-spin-nested-loading > .ant-spin-container {
    width: 100%;
    height: 100%;
  }

  .#{$pkg-prefix}-data-grid-cell,
  .#{$pkg-prefix}-data-grid-header {
    @include ellipsis;

  }

  .#{$pkg-prefix}-data-grid-pagination {
    flex-shrink: 0;
  }

  .#{$pkg-prefix}-data-grid-cell-boxshadow-left {
    border-right: 1px solid #eee;
  }

  .#{$pkg-prefix}-data-grid-cell-boxshadow-right {
    border-left: 1px solid #eee;
  }

  &.#{$pkg-prefix}-data-grid-left-scrolled {
    .#{$pkg-prefix}-data-grid-cell-boxshadow-left::after {
      box-shadow: inset 10px 0 8px -8px #00000026;
      z-index: 1;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: -1px;
      width: 30px;
      transform: translate(100%);
      transition: box-shadow .3s;
      content: "";
      pointer-events: none;
    }
  }

  &.#{$pkg-prefix}-data-grid-right-scrolled {
    .#{$pkg-prefix}-data-grid-cell-boxshadow-right::before {
      box-shadow: inset -10px 0 8px -8px #00000026;
      z-index: 1;
      display: block;
      position: absolute;
      top: 0;
      left: -60px;
      bottom: -1px;
      width: 30px;
      transform: translate(100%);
      transition: box-shadow .3s;
      content: "";
      pointer-events: none;
    }
  }
}