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

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

  .#{$primaryStyleName}-scroller {
    position: absolute;
    z-index: 1;
    outline: none;
    @include 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;
    @include 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;
    @include box-sizing(border-box);
  }

  .#{$primaryStyleName}-horizontal-scrollbar-deco {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    @include 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 {
    z-index: 0;
    top: 0;

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

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

    .v-ie8 &, .v-ie9 & {
      // Neither IE8 nor IE9 let table rows be longer than tbody, with only
      // "display: block". Moar hax.

      float: left;
      clear: left;

      // The inline style of margin-top from the <tbody> to offset the
      // header's dimension is, for some strange reason, inherited into each
      // contained <tr>. We need to cancel it:

      margin-top: 0;
    }

    > 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;
    @include 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%;
      @include box-sizing(border-box);
    }
    
    .v-ie8 &, .v-ie9 & {
      // The inline style of margin-top from the <tbody> to offset the
      // header's dimension is, for some strange reason, inherited into each
      // contained <tr>. We need to cancel it:

      margin-top: 0;
    }
  }
}