.align-left {
  text-align: left;
}

.border-left {
  border-left: 1px solid $color-slate-300;
  &:first-child {
    border-left: 0;
  }
}

.header-label {
  @include bold-type-size(100);
  @include margin(8, bottom);
  left: 0.5rem;
  position: absolute;
  bottom: 2.1rem;
  text-align: left;
  min-width: 10em;
  &.header-label-3 {
    min-width: 13em;
  }
  &.header-label-4 {
    min-width: 16em;
  }
  &.header-label-5 {
    min-width: 19em;
  }
}

.header-label--hidden:not(:focus):not(:active),
.header-label--hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.table {
  line-height: 1rem;
  border-collapse: collapse;
  margin: spacer(8) 0 spacer(24);
  font-variant-numeric: lining-nums tabular-nums;
  width: 100%;

  @media only screen and (max-width: $viewport-lg) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    box-shadow: inset -3px -2px 5px rgba(0, 0, 0, 0.04);
  }

  caption {
    text-align: left;
    @include bold-type-size(200);
    margin-bottom: spacer(16);
  }

  thead {
    border-bottom: 1px solid $color-slate-400;
  }

  th {
    padding: spacer(32) spacer(8) spacer(8);
    line-height: 1.15;
    vertical-align: bottom;
    position: relative;
    min-width: 5em;
    &[scope='col'] {
      text-align: right;
      @include bold-type-size(100);
      .sort {
        display: inline-block;
        margin-right: spacer(8);
      }

      .sort-button {
        border: 0;
        background: transparent;
        font-weight: 800;
        text-decoration: underline;
        cursor: pointer;
        text-align: right;
        display: block;
        width: 100%;
      }
    }

    &[scope='col'].align-left {
      text-align: left;
      .sort-button {
        text-align: left;
      }
    }
    &[scope='row'] {
      font-weight: normal;
      text-align: right;
      padding: spacer(16) spacer(8);
      &.align-left {
        text-align: left;
      }
    }
    &.wide {
      min-width: 13em;
    }
  }

  tbody {
    th,
    td {
      vertical-align: top;
    }

    tr {
      border-bottom: 1px solid $color-slate-200;
      transition: background-color 0.2s;
      &:hover {
        background-color: $color-blueberry-100;
      }
    }
  }
  td {
    text-align: right;
    padding: spacer(16) spacer(8);
    @include type-size(200);

    &.align-left {
      text-align: left;
    }
  }
}
