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

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

The flex grid unit.

Weight: -980

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

/*
Core

The core module.

Weight: -100

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

/*
Default style

The default style.

Weight: -100

Markup: <div class="#{settings.$prefix}-flex-grid">
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- contents -->
    <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>
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width">
      <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
    </figure>
    <!-- contents -->
  </div>
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- contents -->
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width">
      <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
    </figure>
    <p class="#{settings.$prefix}-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
    <!-- contents -->
  </div>
</div>

Style guide: #{settings.$prefix}-flex-grid.core.default
*/
.#{settings.$prefix}-flex-grid {
  --display: flex;
  --flex-direction: row;
  --flex-wrap: nowrap;
  --align-content: flex-start;
  --align-items: stretch;
  --justify-content: flex-start;
  --box-sizing: border-box;
  --width: 100%;
  --height: 100%;
  --vertical-align: baseline;

  // For column
  --column-position: relative;
  --column-overflow: visible;
  --column-display: block;
  --column-flex-basis: 1;
  --column-flex-grow: 1;
  --column-flex-shrink: 1;
  --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;

  flex-direction: var(--flex-direction);
  flex-wrap: var(--flex-wrap);
  vertical-align: var(--vertical-align);

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

    overflow: var(--column-overflow);
    display: var(--column-display);
    flex-basis: var(--column-flex-basis);
    flex-grow: var(--column-flex-grow);
    flex-shrink: var(--column-flex-shrink);

    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);
  }
}