/// Margin utilities.
///
/// @group spacing
///
/// @example scss - Usage
///
///   @include k-utilities-margin;
///
/// @example html
///
///   <div class="k-u-margin-none">…</div>
///
///   <div class="k-u-margin-top-single">…</div>
///
///   <div class="k-u-margin-top-single@xxs-down">…</div>
///   <div class="k-u-margin-top-single@xs-down">…</div>
///   <div class="k-u-margin-top-single@s-down">…</div>
///   <div class="k-u-margin-top-single@m-down">…</div>
///   <div class="k-u-margin-top-single@l-down">…</div>
///
///   <div class="k-u-margin-top-single@xs-up">…</div>
///   <div class="k-u-margin-top-single@s-up">…</div>
///   <div class="k-u-margin-top-single@m-up">…</div>
///   <div class="k-u-margin-top-single@l-up">…</div>
///   <div class="k-u-margin-top-single@xl-up">…</div>
///
///   <div class="k-u-margin-bottom-single">…</div>
///   <div class="k-u-margin-bottom-double">…</div>
///   <div class="k-u-margin-bottom-triple">…</div>
///   <div class="k-u-margin-bottom-quadruple">…</div>
///   <div class="k-u-margin-bottom-quintuple">…</div>
///   <div class="k-u-margin-bottom-none">…</div>
///
///   <div class="k-u-margin-left-single">…</div>
///   <div class="k-u-margin-left-double">…</div>
///   <div class="k-u-margin-left-triple">…</div>
///   <div class="k-u-margin-left-quadruple">…</div>
///   <div class="k-u-margin-left-quintuple">…</div>
///   <div class="k-u-margin-left-none">…</div>
///
///   <div class="k-u-margin-right-single">…</div>
///   <div class="k-u-margin-right-double">…</div>
///   <div class="k-u-margin-right-triple">…</div>
///   <div class="k-u-margin-right-quadruple">…</div>
///   <div class="k-u-margin-right-quintuple">…</div>
///   <div class="k-u-margin-right-none">…</div>

@mixin k-u-margin($position, $slug, $size) {
  $value: k-px-to-rem($size);

  .k-u-margin-#{$position}-#{$slug} {
    margin-#{$position}: $value;
  }

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

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

@mixin k-utilities-margin {
  .k-u-margin-none {
    margin: 0;
  }

  $k-sizes: (
    none: 0,
    single: 10px,
    double: 20px,
    triple: 30px,
    quadruple: 40px,
    quintuple: 50px,
  );

  @each $name, $size in $k-sizes {
    @include k-u-margin('top', $name, $size);
    @include k-u-margin('bottom', $name, $size);
    @include k-u-margin('left', $name, $size);
    @include k-u-margin('right', $name, $size);
  }
}