// Tables
//
// The `<table>` element displays tabular data in rows, columns, and cells.
//
// Markup: tables-table.twig
//
// Weight: 1
//
// Style guide: base.table

// todo - we shouldn't need to import this here, but it won't compile without it.
@import '../../abstracts/mixins';

table {
  border: $health-borderize--very-thin;
  border-collapse: collapse;
  min-width: 43em;
  @include AU-media(sm) {
    min-width: inherit;
  }

  // Spacing above.
  * + &,
  * + .health-table__responsive & {
    @include AU-space('margin-top', 1.5unit);
  }

  caption {
    text-align: left;
    @include AU-space(margin-bottom, 1unit);
  }

  tr:nth-child(even) {
    background-color: $AU-color-background;
  }

  &.table__no-banding {
    tr:nth-child(even) {
      background-color: transparent;
    }
  }

  td,
  th {
    border-bottom: $health-borderize--very-thin;
    @include AU-space('padding', .25unit);
    text-align: left;
    vertical-align: top;
    @include AU-media('md') {
      @include AU-space('padding', .5unit);
      font-size: initial;
    }
  }

  th {
    background-color: $table-bg-colour--header;
  }

  thead {
    border-bottom: $health-borderize--very-thin;
  }

  @media print {
    td,
    th,
    thead {
      border-color: #000 !important;
      background: #fff !important;
    }
  }
}

.health-table__responsive {
  overflow: scroll;
  @include AU-media( md ) {
    overflow: auto;
  }

  @media print {
    overflow: visible;
    table {
      min-width: inherit;
    }
  }
}