@import "settings.global";
@import "components.headings";
@import "objects.grid";

@mixin table {
  @include grid;
  @include grid--wrap;
  width: $table-width;
  margin: $table-margin;
  padding: $table-padding;
  border: $table-border;
  border-collapse: collapse;
  border-spacing: 0;
}

@mixin table__caption {
  @include grid;
  @include grid__cell--full;
  padding: $table-caption-padding;
  color: $table-caption-color;
  max-width: $table-caption-max-width;
  font-size: $table-caption-font-size;
  text-align: $table-caption-text-align;
}

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

@mixin table__row--striped {
  background-color: $table-row-striped-background-color;
  color: $table-row-striped-color;
}

@mixin table__cell {
  display: flex;
  flex: 1;
  overflow: auto;
  padding: $table-cell-padding;
  text-align: $table-cell-text-align;
}

@mixin table__heading {
  @include heading--xsmall;
  display: flex;
  flex: 1;
  font-weight: $table-heading-font-weight;
  background-color: $table-heading-background-color;
  color: $table-heading-color;
  border-bottom: $table-heading-border;
}

@mixin table__heading--striped {
  background-color: $table-heading-striped-background-color;
  color: $table-heading-striped-color;
}

@mixin table-clickable {
  background-color: $table-row-clickable-background-color;
  color: $table-row-clickable-color;
  cursor: pointer;
}

@mixin table-inactive {
  background-color: $table-row-inactive-background-color;
  color: $table-row-inactive-color;
  cursor: default;
}

@mixin table-clickable--inactive {
  background-color: $table-row-inactive-background-color;
  color: $table-row-inactive-color;
  cursor: not-allowed;
}

@mixin table--condensed {
  font-size: $table-condensed-font-size;
}

@mixin table__cell--condensed {
  padding: $table-condensed-cell-padding;
}