.table-container {
  overflow-x: auto;

  // Momentum scrolling (touch) causes rendering issues on iOS with the
  // scrolling background hints. Must be disabled explicitly.
  -webkit-overflow-scrolling: auto;

  background-image: linear-gradient(to right, white 30%, rgba(white, 0)),
                    linear-gradient(to left, white 30%, rgba(white, 0)),
                    radial-gradient(at 0 50%, rgba(black, 0.2), rgba(black, 0) 70%),
                    radial-gradient(at 100% 50%, rgba(black, 0.2), rgba(black, 0) 70%);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 50px 100%, 50px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

.trestle-table {
  @extend .table;
  @extend .table-striped;
  @extend .table-hover;

  margin-bottom: 0;

  > thead, > tbody, > tfoot {
    > tr > td, > tr > td {
      vertical-align: middle;
    }
  }

  tr[data-url] {
    cursor: pointer;
  }

  th, a {
    white-space: nowrap;

    &.wrap {
      white-space: normal;
    }
  }

  tbody a {
    font-weight: normal;
  }

  .select-row {
    width: 2.5em;
    text-align: center;
  }

  .actions {
    text-align: right;
    white-space: nowrap;

    .btn {
      @extend .btn-sm;
      padding: 5px 7px;
      line-height: 1;

      i {
        font-size: 14px;

        width: (18em / 14);
        text-align: center;
      }

      & + .btn {
        margin-left: 4px;
      }
    }
  }

  .avatar {
    width: 32px;
    height: 32px;
    vertical-align: middle;
  }
}