@mixin table {
  display: flex;
  border: $border-0;
  flex-wrap: wrap;
  width: 100%;
  border-collapse: collapse;
  border-spacing: $spacing-0;
  padding: $spacing-0;
  margin: $spacing-0;
}

@mixin table--striped {
  :not(.c-table__row--heading).c-table__row:nth-of-type(odd) {
    background-color: $color-gray-100;
  }
}

@mixin table__head {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
  max-width: 100%;
}

@mixin table__body {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
  max-width: 100%;
}

@mixin table__row {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
  max-width: 100%;
}

@mixin table__row--heading {
  .c-table__col {
    font-weight: $font-bold;
    border-bottom: $border-2 solid $color-gray-300;
  }
}

@mixin table__col {
  display: flex;
  overflow: auto;
  text-align: left;
  border-bottom: $border-1 solid $color-gray-300;
  flex: 1;
  padding: $spacing-2;
}

.c-table {
  @include table;

  &--striped {
    @include table--striped;
  }

  &__head {
    @include table__head;
  }

  &__body {
    @include table__body;
  }

  &__row {
    @include table__row;
  }

  &__row--heading {
    @include table__row--heading;
  }

  &__col {
    @include table__col;
  }
}