$m-position-map: (
    '': '',
    't': '-top',
    'r': '-right',
    'b': '-bottom',
    'l': '-left',
);

$m-space-map: (
    '-4xl': $m-space-4xl,
    '-3xl': $m-space-3xl,
    '-2xl': $m-space-2xl,
    '-xl': $m-space-xl,
    '-lg': $m-space-lg,
    '-md': $m-space-md,
    '' : $m-space,
    '-sm': $m-space-sm,
    '-xs': $m-space-xs,
    '-2xs': $m-space-2xs
);

@mixin m-space-factory($attribute, $has-no-value: false) {
    @each $key-position, $value-position in $m-position-map {
        @if $has-no-value == true {
            &#{$key-position} {
                #{$attribute}#{$value-position}: 0;
            }
        } @else {
            @each $key-space, $value-space in $m-space-map {
                &#{$key-position}#{$key-space} {
                    #{$attribute}#{$value-position}: #{$value-space};
                }
            }
        }

    }
}

.mu {
    // Margin
    &-m {
        @include m-space-factory(margin);
    }

    &-no-m {
        @include m-space-factory(margin, true);
    }

    // Padding
    &-p {
        @include m-space-factory(padding);
    }

    &-no-p {
        @include m-space-factory(padding, true);
    }

    // Display
    &-d {
        &-block {
            display: block;
        }

        &-flex {
            display: flex;
        }

        &-inline {
            display: inline;

            &-block {
                display: inline-block;
            }

            &-flex {
                display: inline-flex;
            }
        }
    }

    // Max and min width
    &-max-w {
        max-width: $m-max-width;

        &-xs {
            max-width: $m-max-width-xs;
        }

        &-sm {
            max-width: $m-max-width-sm;
        }

        &-lg {
            max-width: $m-max-width-lg;
        }

        &-text {
            max-width: $m-max-width-text;
        }
    }

    &-min-w {
        min-width: $m-min-width;
    }
}