@use '@nice-digital/nds-core/scss/spacing';
@use '@nice-digital/nds-core/scss/utils';
@use '@nice-digital/nds-core/scss/media-queries';

////
/// @group spacing
////

// Spacing classes were inspired by https://v4-alpha.getbootstrap.com/utilities/spacing/

// Spacing classes take the form:
//  - {property}{sides}--{size} for xs, or
//  - {property}{sides}--{size}-{breakpoint} upwards
// Where {property} is one of:
//  - m - for classes that set margin
//  - p - for classes that set padding
// And {sides} is one of:
//  - t - for classes that set *-top
//  - b - for classes that set *-bottom
//  - l - for classes that set *-left
//  - r - for classes that set *-right
//  - h - for classes that set both *-left and *-right
//  - v - for classes that set both *-top and *-bottom
// And {size} is on a scale from 'a' (small) via 'd' (default/medium) to 'g' (large) so is one of:
//  - 0 - for classes that eliminate the margin or padding by setting it to 0
//  - a - for extra extra small margin/padding
//  - b - for extra small margin/padding
//  - c - for small margin/padding
//  - d - for default (medium) margin/padding
//  - e - for large margin/padding
//  - f - for extra large margin/padding
//  - g - for extra extra large margin/padding
//  And {breakpoint} is optional and one of:
//  - xs
//  - sm
//  - md
//  - lg
//  - xl
// For example:
//  - `pb--d-lg` - default padding bottom from large breakpoint upwards
//  - `mv--f` - extra large vertical (top and bottom) margin
//  - `mt--c` - small margin top
//  - `pl--c-md` - small padding left from medium breakpoints upwards.

/// Set to `false` to not output all the spacing modifier classes
/// @since 1.0.0
$include-spacing-modifiers: true !default;

// A map of spacing value
$-spacings: (
  0: 0,
  a: spacing.$xx-small,
  b: spacing.$x-small,
  c: spacing.$small,
  d: spacing.$medium,
  e: spacing.$large,
  f: spacing.$x-large,
  g: spacing.$xx-large
);

// Map of property abbreviations to name
$-properties: (
  m: margin,
  p: padding
);

// Map of side abbreviations to name
$-sides: (
  t: top,
  r: right,
  b: bottom,
  l: left,
  h: (
    left,
    right
  ),
  v: (
    bottom,
    top
  )
);

@mixin -prop($prop-name, $length, $side: '') {
  $side: if($side == '', '', '-#{$side}');
  $prop: '#{$prop-name}#{$side}';
  #{$prop}: utils.rem($length) !important;
}

@mixin -side($prop-abbrev, $prop-name, $breakpoint, $size, $length) {
  @each $side-key, $side-name in $-sides {
    .#{$prop-abbrev}#{$side-key}--#{$size}#{$breakpoint} {
      @if utils.is-list($side-name) {
        @each $s in $side-name {
          @include -prop($prop-name, $length, $s);
        }
      } @else {
        @include -prop($prop-name, $length, $side-name);
      }
    }
  }
}

@mixin -spacings($prop-abbrev, $prop-name, $breakpoint) {
  @each $size, $length in $-spacings {
    @include -side($prop-abbrev, $prop-name, $breakpoint, $size, $length);
  }
}

@mixin -properties($breakpoint: '') {
  @each $prop-abbrev, $prop-name in $-properties {
    @include -spacings($prop-abbrev, $prop-name, $breakpoint);
  }
}

@if $include-spacing-modifiers {
  @include -properties;

  @each $breakpoint-name, $breakpoint-value in media-queries.$breakpoints {
    @include media-queries.mq($from: $breakpoint-name) {
      @include -properties('-#{$breakpoint-name}');
    }
  }
}