/// Block alignment utilities, with FlexBox.
///
/// @group align
///
/// @example scss - Usage
///
///   @include k-utilities-blockAlign;
///
/// @example html
///
///   <div class="k-u-blockAlign-center@xxs-down">…</div>
///   <div class="k-u-blockAlign-center@xs-down">…</div>
///   <div class="k-u-blockAlign-center@s-down">…</div>
///   <div class="k-u-blockAlign-center@m-down">…</div>
///   <div class="k-u-blockAlign-center@l-down">…</div>
///
///   <div class="k-u-blockAlign-center@xs-up">…</div>
///   <div class="k-u-blockAlign-center@s-up">…</div>
///   <div class="k-u-blockAlign-center@m-up">…</div>
///   <div class="k-u-blockAlign-center@l-up">…</div>
///   <div class="k-u-blockAlign-center@xl-up">…</div>
///
///   <div class="k-u-blockAlign-center">…</div>
///   <div class="k-u-blockAlign-start">…</div>
///   <div class="k-u-blockAlign-end">…</div>

@mixin k-u-blockAlign($position, $align) {
  $value: $align;

  .k-u-blockAlign-#{position} {
    align-self: $value;
  }

  @each $name, $query in $k-media-queries {
    @if $name != "xl" {
      .k-u-blockAlign-#{$position}\@#{$name}-down {
        @include k-media-max($name) {
          align-self: $value;
        }
      }
    }

    @if $name != "xxs" {
      .k-u-blockAlign-#{$position}\@#{$name}-up {
        @include k-media-min($name) {
          align-self: $value;
        }
      }
    }
  }
}

@mixin k-utilities-blockAlign {

  @include k-u-blockAlign('center', center);
  @include k-u-blockAlign('start', flex-start);
  @include k-u-blockAlign('end', flex-end);
}