@mixin base-escalator($primaryStyleName: v-escalator, $background-color: #fff) {

  .#{$primaryStyleName} {
    position: relative;
  }

  .#{$primaryStyleName}-scroller {
    position: absolute;
    z-index: 1;
    outline: none;
    box-sizing: border-box;
  }

  .#{$primaryStyleName}-scroller-horizontal {
    left: 0; // Left position adjusted to align with frozen columns
    right: 0;
    bottom: 0;
    overflow-y: hidden;
    -ms-overflow-y: hidden;
  }

  .#{$primaryStyleName}-scroller-vertical {
    right: 0;
    top: 0;    // this will be overridden by code, but it's a good default behavior
    bottom: 0; // this will be overridden by code, but it's a good default behavior
    overflow-x: hidden;
    -ms-overflow-x: hidden;
  }

  .#{$primaryStyleName}-tablewrapper {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 5;
  }

  .#{$primaryStyleName}-tablewrapper > table {
    border-spacing: 0;
    table-layout: fixed;
    width: inherit; // a decent default fallback
  }

  .#{$primaryStyleName}-header-deco,
  .#{$primaryStyleName}-footer-deco {
    position: absolute;
    right: 0;
    box-sizing: border-box;
  }

  .#{$primaryStyleName}-horizontal-scrollbar-deco {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }

  .#{$primaryStyleName}-header,
  .#{$primaryStyleName}-body,
  .#{$primaryStyleName}-footer {
    position: absolute;
    left: 0;
    width: inherit;
    z-index: 10;
  }

  .#{$primaryStyleName}-header,
  .#{$primaryStyleName}-header-deco {
    top: 0;
  }

  .#{$primaryStyleName}-footer,
  .#{$primaryStyleName}-footer-deco {
    bottom: 0;
  }

  .#{$primaryStyleName}-body {
    -ms-touch-action: none;
    touch-action: none;
    z-index: 0;
    top: 0;

    .#{$primaryStyleName}-row {
      position: absolute;
      top: 0;
      left: 0;
    }

    .#{$primaryStyleName}-header > .#{$primaryStyleName}-row {
      position: relative;
    }
  }

  .#{$primaryStyleName}-row {
    display: block;

    > td,
    > th {
      // IE8 likes the bgcolor here instead of on the row
      background-color: $background-color;
    }
  }

  .#{$primaryStyleName}-row {
    width: inherit;
  }

  .#{$primaryStyleName}-cell {
    display: block;
    float: left;
    padding: 2px;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;

     // Because Vaadin changes the font size after the initial render, we
     // need to mention the font size here explicitly, otherwise automatic
     // row height detection gets broken.

    font-size: $v-font-size;
  }

  .#{$primaryStyleName}-cell.frozen {
    position: relative;
    z-index: 1;
  }

  .#{$primaryStyleName}-spacer {
    position: absolute;
    display: block;

    background-color: $background-color;

    > td {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
  }
}