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

/*
Float

The float module.

Weight: -91

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

/*
Modifiers

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

Weight: -100

Markup: <div class="float-example {{modifier_class}}"></div>
<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>
<style>
  :where(.float-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
    transition: width 0.2s ease-in-out;
  }
</style>

#{settings.$util-prefix}--float-left - Float to left side
#{settings.$util-prefix}--float-right - Float to right side
#{settings.$util-prefix}--float-none - Disable floating

Style guide: #{settings.$util-prefix}.float.builtin
*/
.#{settings.$util-prefix}--float {
  $floats: ("left", "right", "none");

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

        float: var(--float);
      }
    }
  }
}