.footable_wrapper {
  max-width: 100%;
  overflow: auto;
}

.footable.breakpoint > tbody > tr > td.expand {
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;

  span.footable-toggle {
    @extend .koowa_icon_font;
    @extend .koowa_icon--12;
    display: inline-block;
    width: 44px;
    height: 44px;
    position: relative;

    &:before {
      content: '\e615';
      color: inherit;
      display: inline-block;
      width: 44px;
      height: 44px;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -22px;
      white-space: nowrap;
      min-width: 44px;
      font-weight: bold;
      font-size: 12px;
      line-height: 44px;
      text-align: center;
      @include transition(all 150ms ease);
    }

    &:hover:before {
      color: #000;
      text-shadow: 0 0 4px white;
    }
  }
}

.footable.breakpoint > tbody > tr.footable-detail-show > td.expand span.footable-toggle:before {
  @include rotate(90deg); // IE8 styles on the bottom of this file
}

.footable.breakpoint > tbody > tr.footable-row-detail {
  background: #eee;
}

.footable.breakpoint > tbody > tr:hover:not(.footable-row-detail) {
  cursor: pointer;
}

.footable > tbody > tr > td.footable-cell-detail {
  border-left: none;
}

.footable > thead > tr > th.footable-first-column,
.footable > thead > tr > td.footable-first-column,
.footable > tbody > tr > td.footable-first-column {
  border-left: none;
}

.footable-row-detail-name {
  font-weight: bold;
}

// IE8 styles for the arrows in front of h3's
.old-ie {
  .footable.breakpoint > tbody > tr.footable-detail-show > td.expand span.footable-toggle {
    &:before {
      content: '\e612' !important;
    }
  }
}

// Sortables
.footable > thead > tr > th.footable-sortable:hover {
  cursor: pointer;
}

.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator {
  @extend .koowa_icon_font;
  @extend .koowa_icon--12;

  &:before {
    content: '\e616';
  }
}

.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator {
  @extend .koowa_icon_font;
  @extend .koowa_icon--12;

  &:before {
    content: "\e617";
  }
}