.table {
  --table-border-hsl: var(--base-hsl);
  --table-text-hsl: var(--base-hsl);
  --table-bg-hsl: var(--base-hsl);

  font-size: .9rem;
  border: 1px solid hsla(var(--table-border-hsl), .2);
  border-radius: 3px;

  table { margin: 0; }

  a {
    font-weight: inherit;
    text-decoration: underline;
    text-underline-position: under;
  }

  th, td {
    padding: 8px;
    vertical-align: top;
    color: hsla(var(--table-text-hsl), 1);
    display: block;
    @include breakpoint($medium) {
      display: table-cell;
      padding: 8px 16px;
    }
  }

  th { background-color: hsla(var(--table-bg-hsl), .1); }
  tr + tr { border-top: 1px solid hsla(var(--table-bg-hsl), .2); }

  th {
    display: none;
    @include breakpoint($medium) { display: table-cell; }
  }

  td {
    display: block;
    @include breakpoint($medium) { display: table-cell; }
  }
}

.table {
  @include breakpoint($small-only) {
    td:before {
      content: attr(data-header);
      display: block;
      font-weight: 400;
      background-color: hsla(var(--table-bg-hsl), .1);
      margin: -8px -8px 4px -8px;
      padding: 4px 8px;
    }
  }
}

.table--zebra {
  tr:nth-of-type(even) { background-color: hsla(var(--table-bg-hsl), .04); }
}

.table__lead-cell {
  font-weight: 500;
  min-width: 180px;
}

.table__checks {
  @include breakpoint($medium) { text-align: center; }
}

.table--true  { color: hsla(var(--teal-dark-hsl), 1); }
.table--false { color: hsla(var(--red-hsl), 1);; }

/* Primary styling */
.table--primary {
  border: none;
  border-bottom: 1px solid $orange-tint-lighter;

  th {
    background: $orange-tint-lighter;
    font-size: 20px;
    font-weight: 700;
    padding: 16px 14px;
    border: none;
  }

  thead {
    tr:first-of-type {
      border-radius: 3px 3px 0px 0px;

      th:first-of-type {
        border-top-left-radius: 3px;
      }

      th:last-of-type {
        border-top-right-radius: 3px;
      }
    }
  }

  tr {
    border: none;

    td + td {
      border-left: 1px solid $orange-tint-lighter;
    }

    &:nth-of-type(odd) {
      background: $orange-tint-fade;
    }

    &:nth-of-type(even) {
      background: $orange-tint-light;
    }

    + tr {
      border: none;
    }
  }
}

.table--primary-light {
  table {
    border: solid 1px $orange-tint-light;
  }

  th {
    background: $orange-tint-lightest;
  }

  td {
    border: solid 1px $orange-tint-light;
  }
}

/* Secondary styling */
.table--secondary {
  border: none;
  border-bottom: 1px solid $yellow-tint-dark;

  th {
    background: $yellow-tint-dark;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 14px;
    border: none;
  }

  thead {
    tr:first-of-type {
      border-radius: 3px 3px 0px 0px;

      th:first-of-type {
        border-top-left-radius: 3px;
      }

      th:last-of-type {
        border-top-right-radius: 3px;
      }
    }
  }

  tr {
    border: none;

    td + td {
      border-left: 1px solid $yellow-tint-dark;
    }

    &:nth-of-type(odd) {
      background: $yellow-tint-fade;
    }

    &:nth-of-type(even) {
      background: $yellow-tint-light;
    }

    + tr {
      border: none;
    }
  }
}


.table--small {
  width: 100%;
  border: none;
  border-bottom: 1px solid $orange-tint-lighter;

  th {
    background: $orange-tint-lighter;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 14px;
    border: none;
  }

  thead {
    tr:first-of-type {
      border-radius: 3px 3px 0px 0px;

      th:first-of-type {
        border-top-left-radius: 3px;
      }

      th:last-of-type {
        border-top-right-radius: 3px;
      }
    }
  }

  tr {
    border: none;

    td + td {
      border-left: 1px solid $orange-tint-lighter;
    }

    &:nth-of-type(odd) {
      background: $orange-tint-fade;
    }

    &:nth-of-type(even) {
      background: $orange-tint-light;
    }

    + tr {
      border: none;
    }
  }
}