@use 'functions';
@use 'breakpoints';
@use 'general';

// Spacing values
  $spacing-values: (
    '0': (
      'mobile': 0,
      'tablet': 0,
      'desktop': 0
    ),
    'tiny': (
      'mobile': 2,
      'tablet': 3,
      'desktop': 4
    ),
    'xxxs': (
      'mobile': 4,
      'tablet': 6,
      'desktop': 8
    ),
    'xxs': (
      'mobile': 8,
      'tablet': 12,
      'desktop': 16
    ),
    'xxs2': (
      'mobile': 12,
      'tablet': 16,
      'desktop': 20
    ),
    'xs': (
      'mobile': 16,
      'tablet': 20,
      'desktop': 24
    ),
    's': (
      'mobile': 24,
      'tablet': 28,
      'desktop': 32
    ),
    'm': (
      'mobile': 32,
      'tablet': 36,
      'desktop': 40
    ),
    'm2': (
      'mobile': 36,
      'tablet': 40,
      'desktop': 44
    ),
    'l': (
      'mobile': 40,
      'tablet': 44,
      'desktop': 48
    ),
    'xl': (
      'mobile': 48,
      'tablet': 52,
      'desktop': 56
    ),
    'xxl': (
      'mobile': 56,
      'tablet': 60,
      'desktop': 64
    ),
    'xxxl': (
      'mobile': 64,
      'tablet': 68,
      'desktop': 72
    ),
    'big': (
      'mobile': 72,
      'tablet': 76,
      'desktop': 80
    ),
    'huge': (
      'mobile': 76,
      'tablet': 88,
      'desktop': 100
    ),
    'page-spacing': (
      'mobile': 80,
      'tablet': 100,
      'desktop': 120
    )
  );
  
  // Properties
  $properties: (
    'm': 'margin',
    'p': 'padding',
    'gap': 'gap',
    'b': 'border'
  );
  
  // Directions
  $directions: (
    't': 'top',
    'r': 'right',
    'b': 'bottom',
    'l': 'left',
    'x': ('left', 'right'),
    'y': ('top', 'bottom'),
    '': ''
  );
  
// Mixin to generate spacing classes
@mixin generate-spacing-classes($breakpoint) {
    @each $prop-short, $property in $properties {
      @each $size, $values in $spacing-values {
        @if $property == 'gap' {
          .#{general.$prefix}#{$prop-short}-#{$size} {
            #{$property}: functions.rem(map-get($values, $breakpoint));
          }
          .#{general.$prefix}#{$prop-short}-row-#{$size} {
            row-#{$property}: functions.rem(map-get($values, $breakpoint));
          }
          .#{general.$prefix}#{$prop-short}-col-#{$size} {
            column-#{$property}: functions.rem(map-get($values, $breakpoint));
          }
        } @else {
          @each $dir-short, $direction in $directions {
            .#{general.$prefix}#{$prop-short}#{$dir-short}-#{$size} {
              @if $property == 'border' {
                @if type-of($direction) == 'list' {
                  @each $dir in $direction {
                    border-#{$dir}-width: functions.rem(map-get($values, $breakpoint));
                  }
                } @else if $direction == '' {
                  border-width: functions.rem(map-get($values, $breakpoint));
                } @else {
                  border-#{$direction}-width: functions.rem(map-get($values, $breakpoint));
                }
              } @else {
                @if type-of($direction) == 'list' {
                  @each $dir in $direction {
                    #{$property}-#{$dir}: functions.rem(map-get($values, $breakpoint));
                  }
                } @else if $direction == '' {
                  #{$property}: functions.rem(map-get($values, $breakpoint));
                } @else {
                  #{$property}-#{$direction}: functions.rem(map-get($values, $breakpoint));
                }
              }
            }
          }
        }
      }
    }
  }
  
  // Generate desktop classes (default)
  @media (min-width: #{breakpoints.$tablet + 1}) {
    @include generate-spacing-classes('desktop');
  }
  
  // Generate tablet classes
  @media (min-width: #{breakpoints.$mobile + 1}) and (max-width: breakpoints.$tablet) {
    @include generate-spacing-classes('tablet');
  }
  
  // Generate mobile classes
  @media (max-width: breakpoints.$mobile) {
    @include generate-spacing-classes('mobile');
  }


// New mixin to generate mobile-specific spacing classes
@mixin generate-mobile-specific-spacing-classes() {
  @each $prop-short, $property in $properties {
    @each $size, $values in $spacing-values {
      @if $property == 'gap' {
        .#{general.$prefix}#{$prop-short}-sm-#{$size} {
          @media (max-width: breakpoints.$mobile) {
            #{$property}: functions.rem(map-get($values, 'mobile'));
          }
        }
      } @else {
        @each $dir-short, $direction in $directions {
          .#{general.$prefix}#{$prop-short}#{$dir-short}-sm-#{$size} {
            @media (max-width: breakpoints.$mobile) {
              @if $property == 'border' {
                @if type-of($direction) == 'list' {
                  @each $dir in $direction {
                    border-#{$dir}-width: functions.rem(map-get($values, 'mobile'));
                  }
                } @else if $direction == '' {
                  border-width: functions.rem(map-get($values, 'mobile'));
                } @else {
                  border-#{$direction}-width: functions.rem(map-get($values, 'mobile'));
                }
              } @else {
                @if type-of($direction) == 'list' {
                  @each $dir in $direction {
                    #{$property}-#{$dir}: functions.rem(map-get($values, 'mobile'));
                  }
                } @else if $direction == '' {
                  #{$property}: functions.rem(map-get($values, 'mobile'));
                } @else {
                  #{$property}-#{$direction}: functions.rem(map-get($values, 'mobile'));
                }
              }
            }
          }
        }
      }
    }
  }
}

// Generate mobile-specific classes
@include generate-mobile-specific-spacing-classes();