// TODO: remove this style from existing tables. Use .dataTable from _table.module.scss instead
// standard table styling
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;

  tr {
    transition: background-color 250ms ease-out;
    // if tr has specific background color applied - don't want the background changing on hover
    &:not([class*='bgc-']) {
      &:hover {
        background-color: var(--faint-gray);
      }
    }
    &:not(.table-list-header):not(:last-child):not(.no-bottom-border) {
      border-bottom: 1px solid var(--medium-purple);
    }
  }

  tr.custom-header,
  tr.table-loader {
    border-bottom: 0;
    &:hover {
      background: var(--white);
    }
    td:not([class^='p-']):not([class^='px-']):not([class^='py-']) {
      padding: 0;
    }
  }

  tr.no-padding {
    td:not([class^='p-']):not([class^='px-']):not([class^='py-']) {
      padding: 0;
    }
  }

  td:not([class^='p-']):not([class^='px-']):not([class^='py-']) {
    padding: 16px 8px;
  }
}

/**
* @deprecated table-list-header class should not be used anymore as all tables with be replaced with the Table component
**/
.table-list-header {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-12);
  color: var(--purple);
  &:hover {
    background: var(--white);
  }
  th {
    z-index: 1;
    padding: 8px;
    background: var(--white);
  }
  &:not(.table-header-sticky) {
    th {
      border-bottom: 2px solid var(--purple);
    }
  }
}
:root {
  --top-sticky: 164px;
}
.table-header-sticky {
  th {
    position: sticky;
    box-shadow: 0px 2px 0px 0px var(--purple);
    top: var(--top-sticky);
  }
}

// TODO: unused class, remove when all tables are updated to use _table.module.scss
// for when you want ellipsis (...) to happen instead of wrapping the content of long text when screen size is smaller or table has a lot of columns
// note that this also has the side effect of changing column widths as well to not be auto-sized based on content - they'll be either what you set for "width" or just all the same width.
.data-table-nowrap {
  table-layout: fixed;
  white-space: nowrap;

  td,
  td * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}