@layer base {
  /* Table styles */
  
  .table {
    background-color: var(--color-white);
    border-collapse: collapse;
    font-size: 1rem;
    width: 100%;
  
    @media (max-width: 639.98px) {
      font-size: 0.938rem;
    }
  
    tr {
      border-bottom: 1px solid var(--color-grey-100);
    }
  
    th,
    td {
      padding: 1rem;
    }
  
    th {
      background-color: var(--color-grey-050);
      color: var(--color-grey-800);
      font-weight: 400;
      text-align: left;
      white-space: nowrap;
  
      &:last-of-type {
        text-align: right;
      }
    }
  
    td {
      color: var(--color-grey-900);
      vertical-align: top;
  
      &:last-of-type {
        text-align: right;
      }
    }
  }
  
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-condensed {
    font-size: 0.9rem;
    table-layout: fixed;
  
    td, th {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  
    th, td {
      &:first-of-type {
        width: 5%;
      }
  
      &:nth-of-type(2) {
        width: 5%;
      }
    }
  
    tr:hover {
      background-color: var(--color-grey-100);
    }
  
    td {
      vertical-align: middle;
      padding: 0.5rem;
    }
  }
  
  .table-results {
    font-size: 0.9rem;
    table-layout: fixed;
  
    td, th {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  
    td {
      vertical-align: middle;
      padding: 0.5rem;
    }
  }
  
  .table-left {
    th {
      text-align: left !important;
    }
  
    td {
      text-align: left !important;
    }
  }
  
  .column-filters {
    th > div {
      border-right: 3px solid var(--color-grey-100);
      border-left: 3px solid var(--color-grey-100);
    }
  }
}