@import '../_stylesheets/accessibility';


.dataTable {
    white-space: nowrap;
    table-layout: fixed;

    td {
      position: relative;
      a:focus {
        @include outline;
      }
    }
    th:focus {
      @include outline;
    }
}

#bb-table-header {
  .buttons {
    padding: 0px 0 20px;
  }
}

#bb-table-footer {
  padding: 20px 16px 0;
  a:focus {
    @include outline;
  }
}

.dataTables_wrapper {
  li.dt-button.active {
    background-color: transparent;
  }

  ul.dt-button-collection {
    background-color: #e5e5e5;
    border: 1px solid #c0c0c0;
  }

  li.dt-button a:hover {
    background-color: transparent;
    color: #115094;
    font-weight: bold;
  }

  li.dt-button.active a, li.dt-button.active a:hover, li.dt-button.active a:focus {
    color: #337ab6;
    background-color: transparent;
    font-weight: bold;
  }

  li.dt-button.active a::before {
    content: '✔ ';
  }

  .dataTables_info {
    font-size: 0.8em;
    margin-top: -12px;
    text-align: right;
  }

  .previous a, .next a {
    font-weight: bold;
  }
}

.dt-button-background {
  z-index: 799!important;
}

// Some tables need extra padding applied due to some weirdness in the way panels are generated
// the class table-padding is added only if it is provided as the "style" atrribute in config
.table-padding {
  .bb-data-table-container {
    padding: 20px;
  }
}