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

/*
Clear

The clear module.

Weight: -90

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

/*
Modifiers

The clear modifiers .
+ The breakpoint prefixes can be specified like as `sm:#{settings.$util-prefix}--clear-left`.

Weight: -100

Markup: <div class="clear-example  #{settings.$util-prefix}--float-left"></div>
<p class="#{settings.$prefix}-text  {{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="clear-example  #{settings.$util-prefix}--float-right"></div>
<p class="#{settings.$prefix}-text  {{modifier_class}}">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<style>
  :where(.clear-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

#{settings.$util-prefix}--clear-left - Clear left side floating
#{settings.$util-prefix}--clear-right - Clear right side floating
#{settings.$util-prefix}--clear-both - Clear both floating

Style guide: #{settings.$util-prefix}.clear.builtin
*/
.#{settings.$util-prefix}--clear {
  $clears: ("left", "right", "both");

  @each $clear in $clears {
    &-#{$clear} {
      @include mixin.by-breakpoints() {
        --clear: #{$clear};

        clear: var(--clear);
      }
    }
  }
}