@import '../../src/scss/utility/sass-mq';

$spacing-base: 1rem; // 16px

$mobile: (
  1: $spacing-base * 0.25,
  2: $spacing-base * 0.5,
  3: $spacing-base,
  4: $spacing-base * 1.5,
  5: $spacing-base * 2,
  6: $spacing-base * 2.5,
  7: $spacing-base * 3,
  8: $spacing-base * 4
);

$desktop: (
  1: $spacing-base * 0.25,
  2: $spacing-base * 0.5,
  3: $spacing-base,
  4: $spacing-base * 2,
  5: $spacing-base * 3,
  6: $spacing-base * 4,
  7: $spacing-base * 4.5,
  8: $spacing-base * 6
);

.inline {
  display: flex;
  flex-direction: row;
}

.stack {
  display: flex;
  flex-direction: column;
}

@mixin spacingClasses ($level, $mobileValue, $desktopValue) {
  .verticalPadding-#{$level} {
    padding-top: $mobileValue;
    padding-bottom: $mobileValue;

    @include mq($from: md) {
      padding-top: $desktopValue;
      padding-bottom: $desktopValue;
    }
  }

  .horizontalPadding-#{$level} {
    padding-left: $mobileValue;
    padding-right: $mobileValue;

    @include mq($from: md) {
      padding-left: $desktopValue;
      padding-right: $desktopValue;
    }
  }

  .bottomMargin-#{$level} {
    margin-bottom: $mobileValue;

    @include mq($from: md) {
      margin-bottom: $desktopValue;
    }
  }

  .betweenBottomMargin-#{$level} > *:not(:last-child) {
    margin-bottom: $mobileValue;

    @include mq($from: md) {
      margin-bottom: $desktopValue;
    }
  }

  .betweenRightMargin-#{$level} > *:not(:last-child) {
    margin-right: $mobileValue;

    @include mq($from: md) {
      margin-right: $desktopValue;
    }
  }
}

@each $level, $value in $mobile {
  @include spacingClasses($level, $value, map-get($desktop, $level));
}