table.dataTable thead th.dt-colresizable-hover {
  cursor: col-resize;
  position: relative;

  + th {
    cursor: col-resize;
  }

  &::before {
    background-color: $color-silver-chalice;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
  }
}

table.dataTable.table--resizable-columns {
  table-layout: fixed;

  th {
    box-sizing: border-box;
    min-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;

    &:first-child {
      min-width: 0;
    }

    &.width-out-of-bounds {
      width: 140px !important;
    }
  }
}

div.dataTables_wrapper div.dataTables_processing {
  // This overrides default library behaviour, where the 'Processing' element
  // can go off-screen on large tables due to top: 50% positioning.
  top: 150px !important;
}
