@use 'sass:math';

// Variables
$directions: (
  'l': 'left',
  'r': 'right',
  't': 'top',
  'b': 'bottom'
);

$sizes: (
  'xs': 0.25rem,
  'xl': 2rem
);

$states: ('inherit', 'auto');

// Mixins
@mixin generate-margin-states($prefix, $property) {
  @each $state in $states {
    .#{$prefix}-#{$state} {
      #{$property}: $state;
    }
  }
}

@mixin generate-margin-sizes($prefix, $property) {
  @each $size, $value in $sizes {
    .#{$prefix}-#{$size} {
      #{$property}: $value;
    }
  }
}

@mixin generate-margin-rems($prefixes, $properties, $max: 30) {
  @for $i from 0 through $max {
    @for $j from 0 through 9 {
      $value: $i + math.div($j, 10);
      $selector: '';
      @each $prefix in $prefixes {
        $selector: if($selector == '', ".#{$prefix}-#{$i}#{$j}", "#{$selector}, .#{$prefix}-#{$i}#{$j}");
      }
      #{$selector} {
        @each $prop in $properties {
          margin-#{$prop}: $value * 1rem;
        }
      }
    }
  }
}

@mixin generate-negative-margin-rems($prefixes, $properties, $max: 10) {
  @for $i from 0 through $max {
    @for $j from 0 through 9 {
      $value: $i + math.div($j, 10);
      $selector: '';
      @each $prefix in $prefixes {
        $selector: if($selector == '', ".#{$prefix}--#{$i}#{$j}", "#{$selector}, .#{$prefix}--#{$i}#{$j}");
      }
      #{$selector} {
        @each $prop in $properties {
          margin-#{$prop}: -$value * 1rem;
        }
      }
    }
  }
}

// Auto Margins
.margin-auto,
.mar-auto,
.m-auto {
  margin: auto !important;
}

// Single Direction Margins
@each $short, $full in $directions {
  @include generate-margin-states("mar-#{$short}", "margin-#{$full}");
  @include generate-margin-states("m-#{$short}", "margin-#{$full}");
  @include generate-margin-states("m-#{$full}", "margin-#{$full}");

  @include generate-margin-sizes("mar-#{$short}", "margin-#{$full}");
  @include generate-margin-sizes("m-#{$short}", "margin-#{$full}");
  @include generate-margin-sizes("m-#{$full}", "margin-#{$full}");

  @include generate-margin-rems(("m-#{$short}"), ($full));
  @include generate-negative-margin-rems(("m-#{$short}"), ($full));
}

// Multi-Direction Combinations
$combinations: (
  'tb': (('m-tb', 'm-bt'), ('top', 'bottom')),
  'tr': (('m-tr', 'm-rt'), ('top', 'right')),
  'rl': (('m-rl', 'm-lr'), ('right', 'left')),
  'trb': (('m-trb', 'm-tbr', 'm-rbt', 'm-rtb', 'm-btr', 'm-brt'), ('top', 'right', 'bottom')),
  'tlr': (('m-tlr', 'm-trl', 'm-lrt', 'm-ltr', 'm-rtl', 'm-rlt'), ('top', 'left', 'right')),
  'brl': (('m-brl', 'm-blr', 'm-rlb', 'm-rbl', 'm-lbr', 'm-lrb'), ('bottom', 'right', 'left')),
  '': (('m', 'm-all'), ('top', 'right', 'bottom', 'left'))
);

@each $combo, $data in $combinations {
  $prefixes: nth($data, 1);
  $props: nth($data, 2);
  @include generate-margin-rems($prefixes, $props);
  @include generate-negative-margin-rems($prefixes, $props);
}








/* 
  Margin utilities usage:

  Auto margins:
  <div class="margin-auto">Centered content</div>
  <div class="mar-auto">Centered content</div>
  <div class="m-auto">Centered content</div>

  Single direction margins (l/r/t/b):
  <div class="mar-l-inherit">Left inherit margin</div>
  <div class="m-r-auto">Right auto margin</div>
  <div class="m-top-xs">Top 0.25rem margin</div>
  <div class="mar-b-xl">Bottom 2rem margin</div>

  Percentage margins (0-150%):
  <div class="mar-t-25">Top 25% margin</div>
  <div class="m-l-100">Left 100% margin</div>
  <div class="mar-r-5">Right 5% margin</div>
  <div class="m-b-75">Bottom 75% margin</div>

  Rem margins (0-30.9rem):
  <div class="mar-t--15">Top 1.5rem margin</div>
  <div class="m-l--209">Left 20.9rem margin</div>
  <div class="mar-r--30">Right 3rem margin</div>
  <div class="m-b--105">Bottom 10.5rem margin</div>

  Negative rem margins (0 to -10.9rem):
  <div class="mar-t---10">Top -1rem margin</div>
  <div class="m-l---55">Left -5.5rem margin</div>
  <div class="mar-r---89">Right -8.9rem margin</div>
  <div class="m-b---25">Bottom -2.5rem margin</div>

  Multi-direction combinations:
  <div class="m-tr-50">Top-right 50% margin</div>
  <div class="mar-tb-10">Top-bottom 10% margin</div>
  <div class="m-rl--20">Right-left 2rem margin</div>
  <div class="mar-trb--35">Top-right-bottom 3.5rem margin</div>
  <div class="m-tlr---15">Top-left-right -1.5rem margin</div>
  <div class="mar-brl-25">Bottom-right-left 25% margin</div>
  <div class="m--100">All sides 10rem margin</div>
*/