@use "uswds-core" as *;

td,
th {
  vertical-align: top;
}

.dotgov-table--stacked {
  td, th {
    padding: units(1) units(2) units(2px) 0;
    border: none;
  }

  td.padding-right-0,
  th.padding-right-0 {
    padding-right: 0;
  }

  tr:first-child th:first-child {
    border-top: none;
  }

  td[data-label]:before,
  th[data-label]:before {
    color: color('primary-darker');
    padding-bottom: units(2px);
  }

  td .no-click-outline-and-cursor-help {
    cursor: help;
    use {
      // USWDS has weird interactions with SVGs regarding tooltips,
      // and other components. In this event, we need to disable pointer interactions.
      pointer-events: none;
    }
  }
}

// .dotgov-table allows us to customize .usa-table on the user-facing pages,
// while leaving the default styles for use on the admin pages
.dotgov-table {
  width: 100%;


  @include at-media(mobile-lg) {
    margin-top: units(1); //this doesn't appear to do anything

    //Table header work-break
    tbody th {
      word-break: break-word;
    }

  }
  
  //Table Borders
  tr {
    border: none;
  }

  tr:not(.hide-td-borders) {
    border-bottom: 1px solid color('base-lighter');
  }

  thead th,
  thead th[aria-sort] {
    color: color('primary-darker');
    border-bottom: 2px solid color('base-light');
  }

  //No border for the very top element
  thead tr:first-child th:first-child {
    border-top: none;
  }

  //No border for very bottom element
  tbody tr:last-of-type {
    td, th {
      border-bottom: 0;
    }
  }

  td, th {
    padding: units(2) units(4) units(2) 0;
  }

  // Hack fix to the overly specific selector above that broke utility class usefulness
  .padding-right-105 {
    padding-right: .75rem;
  }


  // Sortable headers
  th[data-sortable][aria-sort=ascending],
  th[data-sortable][aria-sort=descending] {
    background-color: transparent;
    .usa-table__header__button {
      background-color: color('accent-cool-lightest');
      border-radius: units(.5);
      color: color('primary-darker');
      &:hover {
        background-color: color('accent-cool-lightest');
      }
    }
  }
  @include at-media(tablet-lg) {
    th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button {
      // position next to the copy
      right: auto;
      // slide left to mock a margin between the copy and the icon
      transform: translateX(units(1));
      // fix vertical alignment
      top: units(1.5);
    }
    th[data-sortable].left-align-sort-button .usa-table__header__button {
      left: 0;
    }
  }

  // Currently the 'flash' when sort is clicked,
  // this will become persistent if the double-sort bug is fixed
  td[data-sort-active],
  th[data-sort-active] {
    background-color: color('primary-lightest');
  }
}

// The member table has an extra "expand" row, which looks like a single row.
// But the DOM disagrees - so we basically need to hide the border on both rows.
#members__table-wrapper .dotgov-table tr:nth-last-child(2) td,
#members__table-wrapper .dotgov-table tr:nth-last-child(2) th {
  border-bottom: none;
}

.dotgov-table--cell-padding-2 {
  td, th {
    padding: units(2);
  }
}

.dotgov-table--cell-padding-2-2-2-0 {
  @include at-media(mobile-lg) {
    td, th {
      padding: units(2) units(2) units(2) 0;
    }
  }
}

.usa-table--striped tbody tr:nth-child(odd) th,
.usa-table--striped tbody tr:nth-child(odd) td {
  background-color: color('primary-lightest');
}

.usa-table--bg-transparent {
  td, th, thead th {
    background-color: transparent;
  }
}

.usa-table--full-borderless td, 
.usa-table--full-borderless th {
  border: none !important;
}

// This is an override to overflow on certain tables (note the custom class)
// so that a popup menu can appear and starddle the edge of the table on large
// screen sizes. Works with styles in _accordions
@include at-media(desktop) {
  .usa-table-container--scrollable.usa-table-container--override-overflow {
      overflow-y: visible;
  }

  .usa-table-container--override-scrollable td {
    white-space: normal;
  }
}
