@import (reference) '../extend.less';
@margin-padding-position: ~'', ~'-top', ~'-left', ~'-right', ~'-bottom';
@margin-padding-position-name: ~'', ~'t', ~'l', ~'r', ~'b';

.margin-padding (@i) when (@i <=length(@margin-padding-position)) {
    @position: extract(@margin-padding-position, @i);
    @name: extract(@margin-padding-position-name, @i);

    .m@{name}-xl {
        margin@{position}: @padding-xl  !important;
    }

    .m@{name}-lg {
        margin@{position}: @padding-lg  !important;
    }

    .m@{name}-md {
        margin@{position}: @padding-md  !important;
    }

    .m@{name}-sm {
        margin@{position}: @padding-sm  !important;
    }

    .m@{name}-xs {
        margin@{position}: @padding-xs  !important;
    }

    .m@{name}-xxs {
        margin@{position}: @padding-xxs  !important;
    }

    .p@{name}-xl {
        padding@{position}: @padding-xl  !important;
    }

    .p@{name}-lg {
        padding@{position}: @padding-lg  !important;
    }

    .p@{name}-md {
        padding@{position}: @padding-md  !important;
    }

    .p@{name}-sm {
        padding@{position}: @padding-sm  !important;
    }

    .p@{name}-xs {
        padding@{position}: @padding-xs  !important;
    }

    .p@{name}-xxs {
        padding@{position}: @padding-xxs  !important;
    }

    .m@{name}-none {
        margin@{position}: 0 !important;
    }

    .p@{name}-none {
        padding@{position}: 0 !important;
    }

    .margin-padding(@i + 1);
}

.margin-padding(1);