@import '@zendeskgarden/css-variables';

:root {
  --zd-table-font-color: var(--zd-color-grey-800);
  --zd-table-font-size: var(--zd-font-size-md);
  --zd-table-line-height: calc(20 / 14);
  --zd-table__row-border: 1px solid;
  --zd-table__row-border-bottom: var(--zd-table__row-border) var(--zd-color-grey-200);
  --zd-table__row-height: 40px;
  --zd-table__row-transition: background-color .1s ease-in-out;
  --zd-table__row--group-font-size: var(--zd-font-size-sm);
  --zd-table__row--group-height: 32px;
  --zd-table__row--group-line-height: calc(20 / 12);
  --zd-table__row--group__cell-padding: 6px 10px;
  --zd-table__row--header-border-color: var(--zd-color-grey-300);
  --zd-table__row--header-font-weight: var(--zd-font-weight-semibold);
  --zd-table__row--header-height: 48px;
  --zd-table__row--header__cell-padding: 14px;
  --zd-table__row--stripe-background-color: var(--zd-color-grey-100);
  --zd-table__row__cell-padding-horizontal: 12px;
  --zd-table__row__cell-padding-vertical: 10px;
  --zd-table__row__cell-padding: var(--zd-table__row__cell-padding-vertical) var(--zd-table__row__cell-padding-horizontal);
  --zd-table__row__cell-transition:
    border-color .25s ease-in-out,
    box-shadow .1s ease-in-out;
}

/* 1. <table> reset.
   2. <th> reset. */

.c-table {
  display: table;
  border: none; /* [1] */
  width: 100%; /* [1] */
  table-layout: fixed; /* [1] */
  border-collapse: collapse; /* [1] */
  border-spacing: 0; /* [1] */
  line-height: var(--zd-table-line-height);
  color: var(--zd-table-font-color);
  font-size: var(--zd-table-font-size);
}

.c-table__caption {
  display: table-caption;
  text-align: left;
}

.c-table__row {
  display: table-row;
  transition: var(--zd-table__row-transition);
  border-bottom: var(--zd-table__row-border-bottom);
  height: var(--zd-table__row-height);
  vertical-align: top;
  box-sizing: border-box;
}

.c-table__row--group {
  height: var(--zd-table__row--group-height);
  line-height: var(--zd-table__row--group-line-height);
  font-size: var(--zd-table__row--group-font-size);
}

.c-table__row--header {
  border-bottom-color: var(--zd-table__row--header-border-color);
  height: var(--zd-table__row--header-height);
  vertical-align: bottom;
  font-weight: var(--zd-table__row--header-font-weight);
}

.c-table__row--group,
.c-table__row--stripe {
  background-color: var(--zd-table__row--stripe-background-color);
}

.c-table__row__cell {
  display: table-cell;
  transition: var(--zd-table__row__cell-transition);
  padding: var(--zd-table__row__cell-padding);
  box-sizing: border-box;
}

.c-table__row__cell--min {
  box-sizing: content-box;
  padding-right: 0;
  width: 1em;
}

.c-table__row__cell--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-table__row--group .c-table__row__cell {
  padding: var(--zd-table__row--group__cell-padding);
}

.c-table__row--header .c-table__row__cell:not(.c-table__row__cell--overflow) {
  padding-top: var(--zd-table__row--header__cell-padding);
  padding-bottom: var(--zd-table__row--header__cell-padding);
  text-align: left; /* [2] */
}