.data-table-container {
  margin: {
    left: -$site-margins/2;
    right: -$site-margins/2;
  }
  @include media($tablet-up) {
    margin: {
      left: -$site-margins;
      right: -$site-margins;
    }
  }
}

.data-table {
  width: 100%;
  text-align: left;
  font-size: $font-size-small;
  border-collapse: collapse;
  border-bottom: 2px solid $color-tan;
  margin-bottom: 1em;

  th, td {
    padding: {
      top: .5em;
      bottom: .5em;
    }
    &:first-child {
      padding-left: $site-margins/2;
    }
    &:last-child {
      padding-right: $site-margins/2;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    .is-selected {
      color: $color-teal;
      font-weight: 700;
    }

    @include media($tablet-up) {
      &:first-child {
        padding-left: $site-margins;
      }
      &:last-child {
        padding-right: $site-margins;
      }
    }
  }

  th {
    font-weight: 400;
    @extend .text--help;
    border-bottom: 2px solid $color-tan;
  }

  tr {
    &:nth-child(2n) {
      td {
        background-color: $color-background;
      }
    }
    &:nth-child(2n-1) {
      td {
        background-color: #FFFFFF;
      }
    }

    &.row--error td {
      background-color: tint($color-red, 40%);
    }

    &.row--warning td {
      background-color: tint($color-yellow, 40%);
    }
  }

  td {
    border-bottom: 1px solid $color-tan;
    &:first-child {
      font-weight: 700;
    }
  }

  .status {
    white-space: nowrap;

      &.successful {
        color: $color-green;
      }

      &.failure {
        color: $color-red;
      }

      &.not-applicable {
        opacity: .3;
      }
  }
}

.data-table--selectable {
  tr:hover {
    td {
      background-color: rgba($color-teal, .1);
      cursor: pointer;
    }
  }
}

.data-table--divided {
  td {
    border-right: 1px solid $color-tan;

    &:first-child {
      border-right: none;
    }
  }
}
