/**
 * Spacing utilities print
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;

/*
   Base:
    m = margin
    p = padding
  Modifiers:
    a = all
    h = horizontal
    v = vertical
    t = top
    r = right
    b = bottom
    l = left
*/

/* stylelint-disable max-nesting-depth */
@each $breakpoint in map.keys(map.get($theme, 'breakpoint')) {
  @include breakpoints.up($breakpoint) {
    $infix: breakpoints.infix($breakpoint, map.get($theme, 'breakpoint'));

    @each $key, $value in map.get($theme, 'spacing-print') {
      .ecl-u-ma#{$infix}-#{$key} {
        margin: $value !important;
      }

      .ecl-u-mh#{$infix}-#{$key} {
        margin-inline-start: $value !important;
        margin-inline-end: $value !important;
      }

      .ecl-u-mv#{$infix}-#{$key} {
        margin-bottom: $value !important;
        margin-top: $value !important;
      }

      .ecl-u-mt#{$infix}-#{$key} {
        margin-top: $value !important;
      }

      .ecl-u-mr#{$infix}-#{$key} {
        margin-inline-end: $value !important;
      }

      .ecl-u-mb#{$infix}-#{$key} {
        margin-bottom: $value !important;
      }

      .ecl-u-ml#{$infix}-#{$key} {
        margin-inline-start: $value !important;
      }
    }

    // Margin none
    .ecl-u-ma#{$infix}-none {
      margin: 0 !important;
    }

    .ecl-u-mh#{$infix}-none {
      margin-inline-start: 0 !important;
      margin-inline-end: 0 !important;
    }

    .ecl-u-mv#{$infix}-none {
      margin-bottom: 0 !important;
      margin-top: 0 !important;
    }

    .ecl-u-mt#{$infix}-none {
      margin-top: 0 !important;
    }

    .ecl-u-mr#{$infix}-none {
      margin-inline-end: 0 !important;
    }

    .ecl-u-mb#{$infix}-none {
      margin-bottom: 0 !important;
    }

    .ecl-u-ml#{$infix}-none {
      margin-inline-start: 0 !important;
    }

    // Margin auto
    .ecl-u-ma#{$infix}-auto {
      margin: auto !important;
    }

    .ecl-u-mh#{$infix}-auto {
      margin-inline-start: auto !important;
      margin-inline-end: auto !important;
    }

    .ecl-u-mv#{$infix}-auto {
      margin-bottom: auto !important;
      margin-top: auto !important;
    }

    .ecl-u-mb#{$infix}-auto {
      margin-bottom: auto !important;
    }

    .ecl-u-mt#{$infix}-auto {
      margin-top: auto !important;
    }

    .ecl-u-mr#{$infix}-auto {
      margin-inline-end: auto !important;
    }

    .ecl-u-ml#{$infix}-auto {
      margin-inline-start: auto !important;
    }
  }
}

@each $breakpoint in map.keys(map.get($theme, 'breakpoint')) {
  @include breakpoints.up($breakpoint) {
    $infix: breakpoints.infix($breakpoint, map.get($theme, 'breakpoint'));

    @each $key, $value in map.get($theme, 'spacing-print') {
      .ecl-u-pa#{$infix}-#{$key} {
        padding: $value !important;
      }

      .ecl-u-ph#{$infix}-#{$key} {
        padding-inline-start: $value !important;
        padding-inline-end: $value !important;
      }

      .ecl-u-pv#{$infix}-#{$key} {
        padding-bottom: $value !important;
        padding-top: $value !important;
      }

      .ecl-u-pt#{$infix}-#{$key} {
        padding-top: $value !important;
      }

      .ecl-u-pr#{$infix}-#{$key} {
        padding-inline-end: $value !important;
      }

      .ecl-u-pb#{$infix}-#{$key} {
        padding-bottom: $value !important;
      }

      .ecl-u-pl#{$infix}-#{$key} {
        padding-inline-start: $value !important;
      }
    }

    // Padding none
    .ecl-u-pa#{$infix}-none {
      padding: 0 !important;
    }

    .ecl-u-ph#{$infix}-none {
      padding-inline-start: 0 !important;
      padding-inline-end: 0 !important;
    }

    .ecl-u-pv#{$infix}-none {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }

    .ecl-u-pt#{$infix}-none {
      padding-top: 0 !important;
    }

    .ecl-u-pr#{$infix}-none {
      padding-inline-end: 0 !important;
    }

    .ecl-u-pb#{$infix}-none {
      padding-bottom: 0 !important;
    }

    .ecl-u-pl#{$infix}-none {
      padding-inline-start: 0 !important;
    }
  }
}
