@use "../global";

@mixin variant ($name: null) {
    $prefix: null;
    @if $name != null {
        $prefix: #{$name}\:
    }

    .#{$prefix}mx-auto { margin-left: auto; margin-right: auto; }
    @each $size in global.$marginSizes {
        $value: var(--size-#{$size});
        @if $size == 0 {
            $value: 0;
        }
        .#{$prefix}m-#{$size} { margin: #{$value}; }
        .#{$prefix}mt-#{$size} { margin-top: #{$value}; }
        .#{$prefix}mr-#{$size} { margin-right: #{$value}; }
        .#{$prefix}mb-#{$size} { margin-bottom: #{$value}; }
        .#{$prefix}ml-#{$size} { margin-left: #{$value}; }
        .#{$prefix}mx-#{$size} { margin-left: #{$value}; margin-right: #{$value}; }
        .#{$prefix}my-#{$size} { margin-top: #{$value}; margin-bottom: #{$value}; }

        @if $size != 0 {
        .#{$prefix}m--#{$size} { margin: calc(-1 * #{$value}); }
        .#{$prefix}mt--#{$size} { margin-top: calc(-1 * #{$value}); }
        .#{$prefix}mr--#{$size} { margin-right: calc(-1 * #{$value}); }
        .#{$prefix}mb--#{$size} { margin-bottom: calc(-1 * #{$value}); }
        .#{$prefix}ml--#{$size} { margin-left: calc(-1 * #{$value}); }
        .#{$prefix}mx--#{$size} { margin-left: calc(-1 * #{$value}); margin-right: calc(-1 * #{$value}); }
        .#{$prefix}my--#{$size} { margin-top: calc(-1 * #{$value}); margin-bottom: calc(-1 * #{$value}); }
        }
    }
}

@include variant;
@each $bpname, $bpsize in global.$breakpoints {
    @media #{$bpsize} {
        @include variant($bpname);
    }
}