@use '../compiled/tokens/scss/color';
@use '../compiled/tokens/scss/font-weight';
@use '../compiled/tokens/scss/size';
@use './ms';
@use './theme';

$table-border-color: color.$base-gray-light;
$table-border-thin: size.$edge-small solid $table-border-color;
$table-border-thick: size.$edge-medium solid $table-border-color;

/**
 * Themed properties
 */

@include theme.props {
  --theme-color-table-striped: #{color.$base-gray-lighter};
  --theme-color-table-caption: #{color.$base-gray-dark};
}

@include theme.props(dark) {
  --theme-color-table-striped: #{color.$brand-primary-dark};
  --theme-color-table-caption: #{color.$base-gray-lighter};
}

/**
 * Our base table component
 *
 * Since tables require specific markup using the BEM element class names can
 * quickly become overwhelming. We make an exception from our BEM rules to
 * directly style elements within `.c-table`s.
 */

/**
 * Table cells and headers share padding
 */
@mixin t-container {
  padding: size.$padding-cell-vertical size.$padding-cell-horizontal;
}

/**
 * Table headings are semibold to stand out as labels
 */
@mixin t-heading {
  font-weight: font-weight.$semibold;
}

/**
 * Table headers and footers are separated from the table body with strokes.
 */
@mixin t-head {
  border-block-end: $table-border-thick;
}

@mixin t-foot {
  border-block-start: $table-border-thick;
}

@mixin t-caption {
  caption-side: bottom;
  color: var(--theme-color-table-caption);
  font-size: size.$font-small;
  font-style: italic;
  padding: ms.step(-1) 0;
}

/**
 * Table rows can be styled in a couple ways.
 * This is achieved by adding a class to the table itself.
 */
@mixin t-ruled {
  border-block-end: $table-border-thin;
}

@mixin t-striped {
  background-color: var(--theme-color-table-striped);
}

/**
 * The `.c-table--numeric` modifier applies a few stylistic changes to make
 * tables with numeric data easier to read and understand.
 */

/**
 * When comparing numeric table cells, it's easier if the ones, tens, hundreds,
 * etc. columns are lines up.
 *
 * 1. Right align cells so the "ones" column lines up on the right side
 * 2. Make numbers equal width so the columns line up
 * 3. Optionally right align row headings. This keeps headings closer to the
 *    content they label and in some cases improves scannability.
 */
@mixin t-numeric {
  text-align: end; /* 1 */

  td {
    font-variant-numeric: tabular-nums; /* 2 */
  }

  [scope='row'] {
    text-align: end;
  }
}