$aui-table-border-width-title: 3px !default;
$aui-table-border-width: 1px !default;
$aui-table-border-color: $aui-color-black !default;
$aui-table-background-color: $aui-color-gray85 !default;
$aui-table-gutters: unit(2) !default;
$aui-table-cell-padding-x: unit(3) !default;
$aui-table-cell-padding-y: unit(4) !default;

.aui-table {
  width: calc(100% + #{2 * $aui-table-gutters});
  margin-left: #{$aui-table-gutters * -1};
  overflow: auto;
  overflow-y: hidden;

  table {
    border-collapse: separate;
    border-spacing: $aui-table-gutters;
    border-color: $aui-table-border-color;
  }

  caption {
    font-weight: $aui-font-weight-bold;
    text-align: left;
    padding: $aui-table-cell-padding-y $aui-table-gutters;
  }

  tr {
    vertical-align: top;
  }

  th {
    border-top: $aui-table-border-width-title solid $aui-table-border-color;
    font-weight: $aui-font-weight-bold;
    text-align: left;
  }

  th,
  td {
    padding: $aui-table-cell-padding-y $aui-table-cell-padding-x #{$aui-table-cell-padding-y - $aui-table-gutters} 0;
  }

  td {
    border-top: $aui-table-border-width solid $aui-table-border-color;
  }

  &__cell--colored {
    background-color: $aui-table-background-color;
  }

  &__cell--last-row {
    td {
      position: relative;

      &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: #{$aui-table-gutters * -1};
        left: 0;
        right: 0;
        border-bottom: $aui-table-border-width solid $aui-table-border-color;
      }
    }
  }

  &--stretched {
    table {
      width: 100%;
    }
  }

  &--padded {

    th,
    td {
      padding: $aui-table-cell-padding-y $aui-table-cell-padding-x;
    }
  }

  &--responsive {

    thead,
    tfoot {
      display: none; // Hide <thead> as table headers will be displayed in <td> on mobiles
    }

    tr {
      border-top: $aui-table-border-width-title solid $aui-table-border-color;
      padding-bottom: $aui-table-cell-padding-y * 2;
    }

    tr,
    td {
      float: left;
      width: 100%;
    }

    td {
      padding-bottom: $aui-table-cell-padding-y;

      &:before {
        content: attr(data-label); // Use 'data-label' as header text on mobiles
        float: left;
        font-weight: $aui-font-weight-bold;
        hyphens: auto;
        padding-right: $aui-table-cell-padding-x;
        width: 50%;
        word-break: break-word
      }
    }

    .aui-table__cell--last-row-responsive {
      border-bottom: $aui-table-border-width-title solid $aui-table-border-color;
    }

    @include aui-respond-to(large) {

      td {
        padding-bottom: #{$aui-table-cell-padding-y - $aui-table-gutters};

        &:before {
          content: none; // Hide 'data-label' attribute
        }
      }

      thead,
      tr,
      td,
      tfoot {
        float: none;
        width: auto;
      }

      th,
      td {
        display: table-cell;
      }

      thead {
        display: table-header-group;
      }

      tr {
        display: table-row;
      }

      tfoot {
        display: table-footer-group;
      }

      .aui-table__cell--last-row-responsive {
        td {
          border-bottom: $aui-table-border-width solid $aui-table-border-color;
          padding-bottom: $aui-table-cell-padding-y;
        }
      }
    }
  }
}
