@mixin table-container-background($background) {
  background-image: linear-gradient(to right, $background 30%, rgba($background, 0)),
                    linear-gradient(to left, $background 30%, rgba($background, 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-color: $background;

  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 50px 100%, 50px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;

  // iOS 13 no longer supports -wekbit-overflow-scrolling so
  // we must unfortunately disable the overflow shadows.
  @supports (-webkit-touch-callout: none) {
    background: none;
  }
}

.table-container {
  overflow-x: auto;

  @include table-container-background(white);

  .main-content-sidebar & {
    @include table-container-background($content-sidebar-bg);
  }

  &.loading {
    opacity: 0.5;
  }
}

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

  margin-bottom: 0;
  vertical-align: middle;

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

  // Wider border between thead/tbody/tfoot
  > :not(:last-child) > :last-child > * {
    border-bottom-color: $table-border-color;
    border-bottom-width: 2px;
  }

  // No border on bottom of table
  > :last-child > :last-child > * {
    border-bottom: none;
  }

  thead th {
    white-space: nowrap;

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

  tbody a {
    font-weight: normal;
  }

  .select-row {
    width: 2.5em;

    padding-top: 0.125rem;
    padding-bottom: 0.125rem;

    text-align: center;
    vertical-align: middle;

    .form-check-input {
      display: block;
    }
  }

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

  .badge {
    vertical-align: middle;
  }

  ul, ol {
    margin-bottom: 0;
    padding-left: 0;
    list-style-position: inside;
  }
}

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

  .btn {
    @extend .btn-sm;

    padding: 0.5rem;
    line-height: 1;

    i {
      font-size: 0.85rem;

      width: 1.25rem;
      text-align: center;
    }

    &.has-icon .btn-label {
      @include visually-hidden;
    }
  }

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

  .btn-group {
    .btn + .btn {
      margin-left: -1px;
    }
  }
}