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

/*
Vertical align

The vertical-align module.

Weight: -89

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

/*
Modifiers

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

Weight: -100

Markup: <div class="valign-example-wrapper  {{modifier_class}}">
  <div class="valign-example"></div>
</div>
<style>
  :where(.valign-example-wrapper) {
    display:table-cell;
     height:100px;
  }
  :where(.valign-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

#{settings.$util-prefix}--vertical-align-top - Set top
#{settings.$util-prefix}--vertical-align-middle - Set middle
#{settings.$util-prefix}--vertical-align-baseline - Set baseline
#{settings.$util-prefix}--vertical-align-bottom - Set bottom

Style guide: #{settings.$util-prefix}.vertical-align.builtin
*/
.#{settings.$util-prefix}--vertical-align {
  $v-aligns: ("left", "middle", "baseline", "bottom");

  @each $v-align in $v-aligns {
    &-#{$v-align} {
      @include mixin.by-breakpoints() {
        --vertical-align: #{$v-align};

        vertical-align: var(--vertical-align);
      }
    }
  }
}