@use 'responsive';
@use 'typography';
@use 'colours';

table {
  border-top: 1px solid colours.$colour-divider;
  border-spacing: 0;
  margin-bottom: 30px;

  thead {
    border-bottom: 5px solid colours.$colour-admiralty-blue;

    tr {
      background-color: colours.$colour-table-row-bg;
    }
  }

  td, th {
    color: colours.$colour-admiralty-blue;
    /* font-weight: $font-weight-medium; */
    font-size: 18px;
    /* height: 42px; removed to allow padding to control height */
    line-height: 30px;
    padding: 6px 20px;

    @include responsive.not-desktop {
      font-size: 16px;
      line-height: 24px;
    }
  }

  tr  {
    &:nth-child(even) {
      background-color: colours.$colour-table-row-alt-bg;
    }

    td {
      border-bottom: 1px solid colours.$colour-divider;
    }

    &:last-child td {
      border-bottom: 1px solid transparent;
    }
  }

  th {
    border-bottom: 5px solid colours.$colour-admiralty-blue;
    text-align: left;
    font-weight: typography.$font-weight-medium;
  }

  td {
    border-right: 1px solid colours.$colour-divider;
    font-weight: typography.$font-weight-light;

    &:last-child {
      border-right: 1px solid transparent;
    }
  }
}