@use "../../lib/mixin";
@use "../../settings";

/*
#{settings.$prefix}-table-grid

DEPRECATED: This unit is deprecated. Use instead #{settings.$prefix}-flex-grid.

Weight: -990

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

@warn "[DEPRECATED] .#{settings.$prefix}-table-grid is deprecated. Use instead .#{settings.$prefix}-flex-grid.";

/*
Core

The core module.

Weight: -100

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

/*
Default style

The default style.

Weight: -100

Markup: <div class="#{settings.$prefix}-table-grid">
  <div class="#{settings.$prefix}-table-grid__column">
    <!-- content -->
    <p class="#{settings.$prefix}-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="#{settings.$prefix}-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
    <!-- content -->
  </div>
  <div class="#{settings.$prefix}-table-grid__column">
    <!-- content -->
    <p class="#{settings.$prefix}-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
    <p class="#{settings.$prefix}-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <!-- content -->
  </div>
</div>

Style guide: #{settings.$prefix}-table-grid.core.default
*/
.#{settings.$prefix}-table-grid {
  --display: table;
  --border-collapse: collapse;
  --box-sizing: border-box;
  --width: 100%;
  --height: 100%;
  --vertical-align: top;

  // For column
  --column-position: relative;
  --column-display: table-cell;
  --column-overflow: visible;
  --column-box-sizing: border-box;
  --column-width: auto;
  --column-height: auto;
  --column-margin: 0;
  --column-padding: 0;
  --column-border: 0;
  --column-color: inherit;
  --column-vertical-align: inherit;
  --column-list-style: none;
  --column-background-color: transparent;

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

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

    overflow: var(--column-overflow);
    display: var(--column-display);

    box-sizing: var(--column-box-sizing);
    width: var(--column-width);
    height: var(--column-height);
    margin: var(--column-margin);
    padding: var(--column-padding);
    border: var(--column-border);

    color: var(--column-color);
    vertical-align: var(--column-vertical-align);
    list-style: var(--column-list-style);

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