@use 'sass:meta';
@use '../utilities/functions' as fn;

$spacing-fixed: (0, 8, 16, 24, 32, 40);
$spacing-fluid: (2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80);
$directions: (
  '': null,
  // all
  't': top,
  'b': bottom,
  'l': left,
  'r': right,
  'x': (
    left,
    right,
  ),
  'y': (
    top,
    bottom,
  ),
);

@mixin box($class, $css-prop, $directions, $values, $fn) {
  $fn-ref: meta.get-function($fn, $module: fn);

  @each $dir, $sides in $directions {
    @each $value in $values {
      .#{$class}-#{$dir}-#{$fn}-#{$value} {
        @if $dir == '' {
          #{$css-prop}: meta.call($fn-ref, $value);
        } @else if meta.type-of($sides) == list {
          @each $side in $sides {
            #{$css-prop}-#{$side}: meta.call($fn-ref, $value);
          }
        } @else {
          #{$css-prop}-#{$sides}: meta.call($fn-ref, $value);
        }
      }
    }
  }
}

@mixin gap($values, $fn) {
  $fn-ref: meta.get-function($fn, $module: fn);

  @each $value in $values {
    .gap-#{$fn}-#{$value} {
      gap: meta.call($fn-ref, $value);
    }
  }
}

@include box('m', margin, $directions, $spacing-fixed, fixed);
@include box('m', margin, $directions, $spacing-fluid, fluid);
@include box('p', padding, $directions, $spacing-fixed, fixed);
@include box('p', padding, $directions, $spacing-fluid, fluid);
@include gap($spacing-fixed, fixed);
@include gap($spacing-fluid, fluid);