@use '../../global/scss/tools' as nsw;

.nsw-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
  @include nsw.component-spacing();

  &:focus {
    @include nsw.nsw-focus;

    .nsw-section--invert & {   
      @include nsw.nsw-focus($color: var(--nsw-focus-light));
    }
  }

  table {
    margin: 0;
    min-width: nsw.rem(600);
  }

  &--caption-top {
    table {
      caption-side: top;
    }
  }

  &--striped {
    th,
    td {
      border-bottom: 0;
    }

    tbody tr:nth-of-type(even) {
      background-color: var(--nsw-off-white);
      
      .nsw-section--invert & {    
        background-color: var(--nsw-hover-light);
      }
    }
  }

  &--bordered {
    th,
    td {
      border: solid 1px var(--nsw-grey-01);
    }
  }
}

@each $name, $alignment in nsw.$nsw-vertical-align {
  .nsw-table--#{"" + $name} {
    th,
    td {
      vertical-align: $alignment;
    }
  }
}