@mixin utility-generator($prop, $direction, $iterator) {
  @for $index from 1 through $iterator {
    @if ($prop == 'padding') {
      .p#{$direction}-#{$index} {
        @if ($direction == 'x') {
          
            #{$prop}-left: $index * $utility-unit;
            #{$prop}-right: $index * $utility-unit;
          
        }
        @if ($direction == 'y') {
          
            #{$prop}-bottom: $index * $utility-unit;
            #{$prop}-top: $index * $utility-unit;
          
        }
        @if ($direction == 'l') {
          
          #{$prop}-left: $index * $utility-unit;
        
        }
        @if ($direction == 'r') {
          
          #{$prop}-right: $index * $utility-unit;
        
        }
      }
    }
    @if ($prop == 'margin') {
      .m#{$direction}-#{$index} {
        @if ($direction == 'x') {
          
            #{$prop}-left: $index * $utility-unit;
            #{$prop}-right: $index * $utility-unit;
          
        }
        @if ($direction == 'y') {
          
            #{$prop}-bottom: $index * $utility-unit;
            #{$prop}-top: $index * $utility-unit;
          
        }
        @if ($direction == 'l') {
          
          #{$prop}-left: $index * $utility-unit;
        
        }
        @if ($direction == 'r') {
          
          #{$prop}-right: $index * $utility-unit;
        
        }
      }
    }
  }
}