/*
 * Generate Margin Class
 * margin, margin-top, margin-bottom, margin-left, margin-right
 */

.margin (@label, @size: 1, @key:1) when (@size =< 30){
    .m-@{key} {
        margin: @size !important;
    }

    .m-t-@{key} {
        margin-top: @size !important;
    }

    .m-b-@{key} {
        margin-bottom: @size !important;
    }

    .m-l-@{key} {
        margin-left: @size !important;
    }

    .m-r-@{key} {
        margin-right: @size !important;
    }

    .margin(@label - 5; @size + 5; @key + 5);
}

.margin(25, 0px, 0);

/*
 * Generate Padding Class
 * padding, padding-top, padding-bottom, padding-left, padding-right
 */

.padding (@label, @size: 1, @key:1) when (@size =< 30){
    .p-@{key} {
        padding: @size !important;
    }

    .p-t-@{key} {
        padding-top: @size !important;
    }

    .p-b-@{key} {
        padding-bottom: @size !important;
    }

    .p-l-@{key} {
        padding-left: @size !important;
    }

    .p-r-@{key} {
        padding-right: @size !important;
    }

    .padding(@label - 5; @size + 5; @key + 5);
}

.padding(25, 0px, 0);
