// Margin and Padding

$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
                (
                        0: 0,
                        2: 2,
                        4: 4,
                        6: 6,
                        8: 8,
                        10: 10,
                        12: 12,
                        14: 14,
                        16: 16,
                        20: 20,
                        24: 24,
                        28: 28,
                        32: 32,
                        36: 36,
                        40: 40,
                        44: 44,
                        48: 48,
                        52: 52,
                        54: 54,
                        56: 56,
                        60: 60,
                        64: 64,
                        72: 72,
                        74: 74,
                        76: 76,
                        80: 80,
                        84: 84,
                        88: 88,
                        96: 96,
                        100: 100,
                        104: 104,
                        106: 106,
                        108: 108,
                        120: 120,
                        128: 128,
                        140: 140,
                        160: 160,
                ),
                $spacers
);


@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @each $prop, $abbrev in (margin: m, padding: p) {
            @each $size, $length in $spacers {
                .#{$abbrev}#{$infix}-#{$size} { #{$prop}: #{$length}px !important; }
                .#{$abbrev}t#{$infix}-#{$size},
                .#{$abbrev}y#{$infix}-#{$size} {
                    #{$prop}-top: #{$length}px !important;
                }

                .#{$abbrev}r#{$infix}-#{$size} {
                    #{$prop}-right: #{$length}px !important;

                    .rtl & {
                        #{$prop}-right: 0 !important;
                        #{$prop}-left: #{$length}px !important;
                    }
                }

                .#{$abbrev}x#{$infix}-#{$size} {
                    #{$prop}-right: #{$length}px !important;
                }
                .#{$abbrev}b#{$infix}-#{$size},
                .#{$abbrev}y#{$infix}-#{$size} {
                    #{$prop}-bottom: #{$length}px !important;
                }

                .#{$abbrev}l#{$infix}-#{$size} {
                    #{$prop}-left: #{$length}px !important;

                    .rtl & {
                        #{$prop}-left: 0 !important;
                        #{$prop}-right: #{$length}px !important;
                    }
                }

                .#{$abbrev}x#{$infix}-#{$size} {
                    #{$prop}-left: #{$length}px !important;
                }
            }
        }


        // Some special margin utils
        .m#{$infix}-auto { margin: auto !important; }
        .mt#{$infix}-auto,
        .my#{$infix}-auto {
            margin-top: auto !important;
        }
        .mr#{$infix}-auto,
        .mx#{$infix}-auto {
            margin-right: auto !important;
        }
        .mb#{$infix}-auto,
        .my#{$infix}-auto {
            margin-bottom: auto !important;
        }
        .ml#{$infix}-auto,
        .mx#{$infix}-auto {
            margin-left: auto !important;
        }
    }
}