Table

/* stylelint-disable declaration-no-important */

table {
  @include baselineNumbers;
  @include rem(margin, 31px 0); // TODO: use proper grid value
  display: block;
}

table,
.wt-table__body {
  overflow-x: auto;
  width: 100%;
}

// a proper Table paragraph with better styling
.wt-table {
  @include rem(margin, 31px 0); // TODO: use proper grid value
  @include stickOutBoxInContent;

  @include respond-to($grid-breakpoint-xl) {
    @include rem(margin, $grid-typo-spacing-l 0);
    @include stickOutBoxInContent($defaultOffsetLeft, $column);
  }

  table {
    border: 0;
    display: table;
    margin: 0;
    max-height: none;
    min-width: 100%;
    p + p {
      margin-top: 0;
    }
  }

  thead {
    background-color: $tableHeaderBackgroundColour;
    font-weight: bold;
    position: sticky;
    top: 0;
    th {
      @include rem(padding-bottom, $grid-spacing-unit * 2);
      @include rem(padding-top, $grid-spacing-unit * 2);
      background-color: map-get($brandColours, blueWhale);
      color: $white;
    }
  }

  tbody th,
  thead th:first-of-type {
    border-left: 0;
  }

  th {
    background-color: $ncLightGrey;
    border: 0;
    border-bottom: 1px solid $white;
    color: $tableHeadingFontColour;
    font-weight: bold;
    min-width: auto;
    text-align: right;
    &:first-of-type {
      text-align: left;
    }
    + td:first-of-type {
      text-align: right;
    }
  }

  th:last-of-type {
    border-right: 0;
  }
  td {
    border-bottom: solid 1px $tableHeadingBackgroundColour;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    color: $tableCellFontColour;
    text-align: right;
    &:first-of-type {
      text-align: left;
    }
  }
}

caption {
  @include font-size-with-line-height($h3FontSizeSmall, $h3LineHeightSmall);
  @include rem(padding-bottom, $grid-typo-spacing-s);
  background-color: $white;
  display: block;
  text-align: left;
  z-index: 1;

  @include respond-to($grid-breakpoint-s) {
    @include font-size-with-line-height($h3FontSize, $h3LineHeight);
  }
}

.wt-table__caption {
  margin-top: 0;
}

.wt-table__body {
  @include rem(margin, $grid-typo-spacing-m 0 $grid-typo-spacing-xxs);
}

.wt-table__footnote {
  @include rem(margin-top, $grid-typo-spacing-xxs);
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);
}

.wt-table__data {
  @include rem(margin-top, $grid-typo-spacing-xxs);

  a {
    color: $ncOrange;
    text-decoration: none;

    &:hover {
      color: $ncDarkBlue;
      text-decoration: underline;
    }
  }

  @include respond-to($grid-breakpoint-s) {
    float: right;
    margin-top: 0;
  }
}

thead,
tbody {
  @include font-size-with-line-height(
    $smallTextFontSize,
    18px
  ); // LH different on purpose
}

th,
td {
  @include rem(padding, $grid-typo-spacing-xxs);
  background-clip: padding-box;
  border: solid 1px #c5c5c5; // TODO: change to the new ncDuskGrey variable when it arrives
}

thead th {
  background-color: $ncLightGrey;
  text-align: right;
  // the header for the row headers should have the same align
  &:first-of-type {
    text-align: left;
  }
}

tbody th {
  background-color: $white;
  font-weight: normal;
  min-width: $column * 2;
  text-align: left;
  vertical-align: top;
}

tbody td {
  text-align: right;
  vertical-align: top;
}
.nested-list table {
  border: 0;
  width: 100% !important; // overriding the wysiwig table styles
}