@import "Scrollbar";

.#{$prefix}{

  $headerConfig:(borderLeft:1px solid #000,borderTop:1px solid #000,borderRight:1px solid #000,borderBottom:1px solid #000);
  $bodyConfig:(borderLeft:1px solid #000,borderTop:none,borderRight:1px solid #000,borderBottom:1px solid #000);
  $rowConfig:(border:1px solid #000);
  $colConfig:(border:1px solid #f0f);


  position: relative;
  width:100%;
  height:100%;
  overflow:hidden;
  @include css(transform,translateZ(0));
  .#{$prefix}-cell{
    position: absolute;
    left:0;
    z-index:1;
    border:{
      bottom:map-get($rowConfig,border);
      right:map-get($colConfig,border);
    }
    box-sizing:border-box;
    background:{
      color:#fff;
      clip:content-box;
    }
    overflow: hidden;
    &[html_content='false']{
      overflow:hidden;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      >span{
        overflow:hidden;
        text-overflow: ellipsis;
      }
    }

  }
  >*{
    box-sizing: border-box;
  }
  >.#{$prefix}-header{
    position: absolute;
    top:0;
    left:0;
    height:30px;
    width:100%;
    overflow:hidden;
    border:{
      left:map-get($headerConfig,borderLeft);
      top:map-get($headerConfig,borderTop);
      right:map-get($headerConfig,borderRight);
      bottom:map-get($headerConfig,borderBottom);
    }
    .#{$prefix}-cell{
      border-bottom:none;
      height:100% !important;
    }
  }
  .#{$prefix}-header-content{
    position: relative;
    width:100%;
    height:100%;
  }
  .#{$prefix}-body-container{
    position: relative;
    width:100%;
    height:100%;
    overflow:auto;
    border:{
      left:map-get($bodyConfig,borderLeft);
      top:map-get($bodyConfig,borderTop);
      right:map-get($bodyConfig,borderRight);
      bottom:map-get($bodyConfig,borderBottom);;
    }
    &[scrollx='false']{
      overflow-x:hidden;
    }
    &[scrolly='false']{
      overflow-y:hidden;
    }
    &[scroll-x='false']{
      overflow-x:hidden;
    }
    &[scroll-y='false']{
      overflow-y:hidden;
    }
  }
  .#{$prefix}-freeze-header-container{
    height:100%;
  }
  .#{$prefix}-freeze-header-container,.#{$prefix}-freeze-col-container,.#{$prefix}-freeze-row-container,.#{$prefix}-freeze-cross-container{
    position: absolute;
    top:0;
    left:0;
    z-index:2;
    .#{$prefix}-cell{
      background-color:#9cf9b5;
    }
  }
  .#{$prefix}-freeze-cross-container{
    z-index:3;
  }
  .#{$prefix}-freeze-container{
    position: absolute;
    left:0 !important;
    top:0 !important;
  }
  .#{$prefix}-row-container{
    position: relative;
  }
  .#{$prefix}-row-cursor{
    position: absolute;
    width:1px;
    height:1px;
    font-size:0;
    left:0;
    pointer-events: none;
    background-color:transparent;
    visibility: hidden;
  }
}