@import '../shared-styles/index';

$padding-vertical: nx-spacer(m);
$padding-sides: nx-spacer(s);

$border-size-large: nx-border-size(m);
$border-size-small: nx-border-size(xs);

.nx-table {
  // we include the cell typography here that it also gets set for the appendix
  @include type-style(table-cell);
  color: v(table-cell-color);
  text-align: left;
  width: 100%;
  display: table;

  :host-context([dir='rtl']) & {
    text-align: right;
  }
}

.nx-table__scroll {
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
}

.nx-table__header-cell {
  @include type-style(table-header-cell);
  color: v(table-header-cell-color);
  background: v(table-header-cell-background-color);
  border-top: $border-size-small solid v(table-cell-border-top-color);
  border-bottom: $border-size-large solid v(table-header-border-bottom-color);
  padding: ($padding-vertical - $border-size-small) $padding-sides
    ($padding-vertical - $border-size-large);
  position: relative;
}

.nx-table__header-cell--number {
  display: flex;
  position: relative;
}

.nx-table__header-cell--number .nx-table__header-title--block {
  justify-content: flex-end;
}

.nx-table__cell--number,
.nx-table__header-cell--number {
  text-align: right;

  :host-context([dir='rtl']) & {
    text-align: left;
  }
}

.nx-table__header-row,
.nx-table__row {
  display: table-row;
  vertical-align: inherit;
  background-color: transparent;
}

.nx-table__row {
  background: v(table-row-background-color);
}

.nx-table__cell {
  border-bottom: $border-size-small solid v(table-header-border-top-color);
  padding: $padding-vertical $padding-sides ($padding-vertical - $border-size-small) $padding-sides;
  vertical-align: top;
}

.nx-table__row:last-child .nx-table__cell {
  padding-bottom: $padding-vertical - $border-size-large;
  border-bottom: $border-size-large solid v(table-header-border-bottom-color);
}

.nx-table__header-cell,
.nx-table__cell {
  display: table-cell;
  vertical-align: inherit;
}
