@import "../variables";

$customSpacers: (
        0: $spacer * 0, // required for overwriting with the same name (priority)
        1: $spacer * 2,
        2: $spacer * 4,
);

// taken from bootstrap bootstrap/scss/utilities/_spacing.scss (modified only prefix and custom $spacers array)
@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @each $prop, $abbrev in (margin: sg-m, padding: sg-p) {
            @each $size, $length in $customSpacers {
                .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
                .#{$abbrev}t#{$infix}-#{$size},
                .#{$abbrev}y#{$infix}-#{$size} {
                    #{$prop}-top: $length !important;
                }
                .#{$abbrev}r#{$infix}-#{$size},
                .#{$abbrev}x#{$infix}-#{$size} {
                    #{$prop}-right: $length !important;
                }
                .#{$abbrev}b#{$infix}-#{$size},
                .#{$abbrev}y#{$infix}-#{$size} {
                    #{$prop}-bottom: $length !important;
                }
                .#{$abbrev}l#{$infix}-#{$size},
                .#{$abbrev}x#{$infix}-#{$size} {
                    #{$prop}-left: $length !important;
                }
            }
        }

    }
}