table,
.table {
  background-color: $white;
  border: 1px solid $middlegrey;
  border-radius: $border-radius-small;
  border-spacing: 0;
  border-collapse: separate;
  font-size: $font-size-small;
  margin-bottom: 1rem;

  thead th {
    background: none !important;
    border-bottom: none;
    border-top: none;
    font-weight: 600;
    line-height: 1.125rem;
    padding: 1.125rem 1rem;

    div {
      display: inline-block;
    }
  }

  td {
    line-height: 1.214;
    padding: 1.125rem 1rem;
    border-top: 1px solid $middlegrey;
    vertical-align: top;

    a {
      text-decoration: none;

      &:hover {
        color: $innovationblue;
      }
    }
  }

  &.borderless {
    border: 0;

    strong {
      font-size: $font-size-base;
      font-weight: 600;
      line-height: 1.25rem;
      display: block;
    }

    strong + span {
      font-size: $font-size-extrasmall;
      line-height: 1.25rem;
      color: $mediumgrey;
      text-transform: uppercase;
    }

    a:hover strong + span {
      color: inherit;
    }
  }
}

.table {
  thead th {
    &[aria-sort] div::after {
      @extend %icon-font;

      content: '\e93b';
      color: $mediumgrey;
      font-size: 1rem;
      margin-left: 0.5rem;
      display: inline-block;
    }

    &[aria-sort='descending'] div::after {
      transform: rotate(180deg);
    }

    &:hover div::after {
      color: $innovationblue;
    }
  }

  td {
    line-height: 1em;
  }
}