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

/*
Wrap

The wrap module.

Weight: -96

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

/*
Modifiers

The wrap modifiers.

Weight: -100

Markup: <div class="#{settings.$prefix}-flex-grid  {{modifier_class}}">
  <div class="#{settings.$prefix}-flex-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>
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width  #{settings.$util-prefix}--float-left">
      <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
    </figure>
    <!-- content -->
  </div>
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- content -->
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width  #{settings.$util-prefix}--float-left">
      <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>
    <!-- content -->
  </div>
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- content -->
    <p class="#{settings.$prefix}-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width  #{settings.$util-prefix}--float-left">
      <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
    </figure>
    <!-- content -->
  </div>
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- content -->
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width  #{settings.$util-prefix}--float-left">
      <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>
    <!-- content -->
  </div>
</div>

#{settings.$prefix}-flex-grid--wrap-false - Disable wrap columns
#{settings.$prefix}-flex-grid--wrap-true - Enable wrap columns

Style guide: #{settings.$prefix}-flex-grid.wrap.builtin
*/
.#{settings.$prefix}-flex-grid--wrap {
  &-false {
    --flex-wrap: nowrap;
  }

  &-true {
    --flex-wrap: wrap;
  }
}