Scss utility classes like tailwind

@mixin render-utils-classes {
  @include render-utils-classes-base;
  @include render-utils-classes-by-breakpoint("xs", $xs);
  @include render-utils-classes-by-breakpoint("sm", $sm);
  @include render-utils-classes-by-breakpoint("md", $md);
  @include render-utils-classes-by-breakpoint("lg", $lg);
}

@mixin render-utils-classes-base {
  $spaces: "0", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl", "jumbo";
  @each $space in $spaces {
    //@debug $breakpointValue;
    // .text-#{$space} {
    //   font-size: var(--text-#{$space});
    // }
    .m-#{$space} {
      margin: var(--space-#{$space});
    }
    .mt-#{$space} {
      margin-top: var(--space-#{$space});
    }
    .mr-#{$space} {
      margin-right: var(--space-#{$space});
    }
    .mb-#{$space} {
      margin-bottom: var(--space-#{$space});
    }
    .ml-#{$space} {
      margin-left: var(--space-#{$space});
    }
    .mx-#{$space} {
      margin-left: var(--space-#{$space});
      margin-right: var(--space-#{$space});
    }
    .my-#{$space} {
      margin-top: var(--space-#{$space});
      margin-bottom: var(--space-#{$space});
    }

    .mb-1e {
      margin-bottom: 1em;
    }
    .mb-05e {
      margin-bottom: 0.5em;
    }

    .p-#{$space} {
      padding: var(--space-#{$space});
    }
    .px-#{$space} {
      padding-left: var(--space-#{$space});
      padding-right: var(--space-#{$space});
    }
    .py-#{$space} {
      padding-top: var(--space-#{$space});
      padding-bottom: var(--space-#{$space});
    }
    .-px-#{$space} {
      padding-left: calc(-1 * var(--space-#{$space}));
      padding-right: calc(-1 * var(--space-#{$space}));
    }
    .-py-#{$space} {
      padding-top: calc(-1 * var(--space-#{$space}));
      padding-bottom: calc(-1 * var(--space-#{$space}));
    }
    .pt-#{$space} {
      padding-top: var(--space-#{$space});
    }
    .pr-#{$space} {
      padding-right: var(--space-#{$space});
    }
    .pb-#{$space} {
      padding-bottom: var(--space-#{$space});
    }
    .pl-#{$space} {
      padding-left: var(--space-#{$space});
    } 
  }
}

@mixin render-utils-classes-by-breakpoint($breakpointName, $breakpointValue) {
  @media screen and (min-width: $breakpointValue) {
    $spaces: "0", "xs", "sm", "md", "lg", "xl";
    @each $space in $spaces {
      //@debug $breakpointValue;
      // .#{$breakpointName}\:text-#{$space} {
      //   font-size: var(--text-#{$space});
      // }
      .#{$breakpointName}\:m-#{$space} {
        margin: var(--space-#{$space});
      }
      .#{$breakpointName}\:mt-#{$space} {
        margin-top: var(--space-#{$space});
      }
      .#{$breakpointName}\:mr-#{$space} {
        margin-right: var(--space-#{$space});
      }
      .#{$breakpointName}\:mb-#{$space} {
        margin-bottom: var(--space-#{$space});
      }
      .#{$breakpointName}\:ml-#{$space} {
        margin-left: var(--space-#{$space});
      }
      .#{$breakpointName}\:mx-#{$space} {
        margin-left: var(--space-#{$space});
        margin-right: var(--space-#{$space});
      }
      .#{$breakpointName}\:-mx-#{$space} {
        margin-left: calc(-1 * var(--space-#{$space}));
        margin-right: calc(-1 * var(--space-#{$space}));
      }

      .#{$breakpointName}\:my-#{$space} {
        margin-top: var(--space-#{$space});
        margin-bottom: var(--space-#{$space});
      }

      .#{$breakpointName}\:mb-1e {
        margin-bottom: 1em;
      }
      .#{$breakpointName}\:mb-05e {
        margin-bottom: 0.5em;
      }

      .#{$breakpointName}\:p-#{$space} {
        padding: var(--space-#{$space});
      }
      .#{$breakpointName}\:px-#{$space} {
        padding-left: var(--space-#{$space});
        padding-right: var(--space-#{$space});
      }
      .#{$breakpointName}\:py-#{$space} {
        padding-top: var(--space-#{$space});
        padding-bottom: var(--space-#{$space});
      }
      .#{$breakpointName}\:-px-#{$space} {
        padding-left: calc(-1 * var(--space-#{$space}));
        padding-right: calc(-1 * var(--space-#{$space}));
      }
      .#{$breakpointName}\:-py-#{$space} {
        padding-top: calc(-1 * var(--space-#{$space}));
        padding-bottom: calc(-1 * var(--space-#{$space}));
      }
      .#{$breakpointName}\:pt-#{$space} {
        padding-top: var(--space-#{$space});
      }
      .#{$breakpointName}\:pr-#{$space} {
        padding-right: var(--space-#{$space});
      }
      .#{$breakpointName}\:pb-#{$space} {
        padding-bottom: var(--space-#{$space});
      }
      .#{$breakpointName}\:pl-#{$space} {
        padding-left: var(--space-#{$space});
      }

      .#{$breakpointName}\:w70 {
        width: 70vw;
      }
    }
  }
}