@use "../global";

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

    @each $size in global.$marginSizes {
        $value: var(--size-#{$size});
        @if $size == 0 {
            $value: 0;
        }
        .#{$prefix}p-#{$size} { padding: #{$value}; }
        .#{$prefix}pt-#{$size} { padding-top: #{$value}; }
        .#{$prefix}pr-#{$size} { padding-right: #{$value}; }
        .#{$prefix}pb-#{$size} { padding-bottom: #{$value}; }
        .#{$prefix}pl-#{$size} { padding-left: #{$value}; }
        .#{$prefix}px-#{$size} { padding-left: #{$value}; padding-right: #{$value}; }
        .#{$prefix}py-#{$size} { padding-top: #{$value}; padding-bottom: #{$value}; }
    }
}

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