@use "sass:map";
@use "sass:meta";
@use "sass:string";
@use "../../lib/mixin";
@use "../../settings";

/*
#{settings.$prefix}-table

The table unit.

Weight: -1050

Style guide: #{settings.$prefix}-table
*/

/*
Core

The core module.

Weight: -100

Style guide: #{settings.$prefix}-table.core
*/

/*
Default style

The default style.

Weight: -100

Markup: <table class="#{settings.$prefix}-table">
  <tr>
    <th class="#{settings.$prefix}-table__column" scope="row">Lorem ipsum dolor sit amet.</th>
    <td class="#{settings.$prefix}-table__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
  <tr>
    <th class="#{settings.$prefix}-table__column" scope="row">あのイーハトーヴォのすきとおった風。</th>
    <td class="#{settings.$prefix}-table__column">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
  </tr>
</table>

Style guide: #{settings.$prefix}-table.core.default
*/
.#{settings.$prefix}-table {
  $pkg: settings.$pkg;

  --display: table;
  --border-collapse: collapse;
  --border: 1px solid currentColor;

  // For columns
  --column-display: table-cell;
  --column-padding: 5px 10px calc(5px * var(--column-line-height));
  --column-border: 1px solid currentColor;
  --column-font-size: var(--#{$pkg}-font-size);
  --column-font-weight: var(--#{$pkg}-font-weight);
  --column-font-style: normal;
  --column-line-height: var(--#{$pkg}-line-height);
  --column-color: inherit;
  --column-text-align: left;
  --column-text-decoration: none;
  --column-text-indent: 0;
  --column-letter-spacing: var(--#{$pkg}-letter-spacing);
  --column-white-space: normal;
  --column-vertical-align: middle;
  --column-background-color: transparent;
  --column-heading-background-color: transparent;

  border-collapse: var(--border-collapse);

  &__column {
    display: var(--column-display);

    padding: var(--column-padding);
    border: var(--column-border);

    font-size: var(--column-font-size);
    font-weight: var(--column-font-weight);
    font-style: var(--column-font-style);
    line-height: var(--column-line-height);
    color: var(--column-color);
    text-align: var(--column-text-align);
    text-decoration: var(--column-text-decoration);
    text-indent: var(--column-text-indent);
    letter-spacing: var(--column-letter-spacing);
    white-space: var(--column-white-space);
    vertical-align: var(--column-vertical-align);

    background-color: var(--column-background-color);

    &:where([scope]) {
      --column-background-color: var(--column-heading-background-color);
    }
  }
}