/*  ==========================================================================
    SPACING
    ========================================================================== */



/*
    Paddings
    ==================================== */


/*
    Padding global
*/
.p-0        { padding: $spacing-size-0 + px; }
.p-s        { padding: $spacing-size-s + px; }
.p-m        { padding: $spacing-size-m + px; }
.p-l        { padding: $spacing-size-l + px; }
.p-xl       { padding: $spacing-size-xl + px; }

/*
    Vertical padding
*/
.pv-0       { padding-top: $spacing-size-0 + px; padding-bottom: $spacing-size-0 + px; }
.pv-s       { padding-top: $spacing-size-s + px; padding-bottom: $spacing-size-s + px; }
.pv-m       { padding-top: $spacing-size-m + px; padding-bottom: $spacing-size-m + px; }
.pv-l       { padding-top: $spacing-size-l + px; padding-bottom: $spacing-size-l + px; }
.pv-xl      { padding-top: $spacing-size-xl + px; padding-bottom: $spacing-size-xl + px; }

/*
    Horizontal padding
*/
.ph-0       { padding-left: $spacing-size-0 + px; padding-right: $spacing-size-0 + px; }
.ph-s       { padding-left: $spacing-size-s + px; padding-right: $spacing-size-s + px; }
.ph-m       { padding-left: $spacing-size-m + px; padding-right: $spacing-size-m + px; }
.ph-l       { padding-left: $spacing-size-l + px; padding-right: $spacing-size-l + px; }
.ph-xl      { padding-left: $spacing-size-xl + px; padding-right: $spacing-size-xl + px; }

/*
    Top padding
*/
.pt-0       { padding-top: $spacing-size-0 + px !important; }
.pt-xs      { padding-top: $spacing-size-xs + px !important; }
.pt-s       { padding-top: $spacing-size-s + px !important; }
.pt-m       { padding-top: $spacing-size-m + px !important; }
.pt-l       { padding-top: $spacing-size-l + px !important; }
.pt-xl      { padding-top: $spacing-size-xl + px !important; }

/*
    Right padding
*/
.pr-0       { padding-right: $spacing-size-0 + px !important; }
.pr-s       { padding-right: $spacing-size-s + px !important; }
.pr-m       { padding-right: $spacing-size-m + px !important; }
.pr-l       { padding-right: $spacing-size-l + px !important; }
.pr-xl      { padding-right: $spacing-size-xl + px !important; }

/*
    Bottom padding
*/
.pb-0       { padding-bottom: $spacing-size-0 + px !important; }
.pb-s       { padding-bottom: $spacing-size-s + px !important; }
.pb-m       { padding-bottom: $spacing-size-m + px !important; }
.pb-l       { padding-bottom: $spacing-size-l + px !important; }
.pb-xl      { padding-bottom: $spacing-size-xl + px !important; }

/*
    Left padding
*/
.pl-0       { padding-left: $spacing-size-0 + px !important; }
.pl-s       { padding-left: $spacing-size-s + px !important; }
.pl-m       { padding-left: $spacing-size-m + px !important; }
.pl-l       { padding-left: $spacing-size-l + px !important; }
.pl-xl      { padding-left: $spacing-size-xl + px !important; }



/*
    Margins
    ==================================== */

    
/*
    Margin global
*/
.m-0        { margin: $spacing-size-0 + px; }
.m-s        { margin: $spacing-size-s + px; }
.m-m        { margin: $spacing-size-m + px; }
.m-l        { margin: $spacing-size-l + px; }
.m-xl       { margin: $spacing-size-xl + px; }

/*
    Verical margin
*/
.mv-0       { margin-top: $spacing-size-0 + px; margin-bottom: $spacing-size-0 + px; }
.mv-s       { margin-top: $spacing-size-s + px; margin-bottom: $spacing-size-s + px; }
.mv-m       { margin-top: $spacing-size-m + px; margin-bottom: $spacing-size-m + px; }
.mv-l       { margin-top: $spacing-size-l + px; margin-bottom: $spacing-size-l + px; }
.mv-xl      { margin-top: $spacing-size-xl; margin-bottom: $spacing-size-xl + px; }

/*
    Horizontal margin
*/
.mh-0       { margin-left: $spacing-size-0 + px; margin-right: $spacing-size-0 + px; }
.mh-s       { margin-left: $spacing-size-s + px; margin-right: $spacing-size-s + px; }
.mh-m       { margin-left: $spacing-size-m + px; margin-right: $spacing-size-m + px; }
.mh-l       { margin-left: $spacing-size-l + px; margin-right: $spacing-size-l + px; }
.mh-xl      { margin-left: $spacing-size-xl + px; margin-right: $spacing-size-xl + px; }

/*
    Top margin
*/
.mt-0       { margin-top: $spacing-size-0 + px !important; }
.mt-s       { margin-top: $spacing-size-s + px !important; }
.mt-m       { margin-top: $spacing-size-m + px !important; }
.mt-l       { margin-top: $spacing-size-l + px !important; }
.mt-xl      { margin-top: $spacing-size-xl + px !important; }
.mt-xxl     { margin-top: $spacing-size-xl + px !important; }

/*
    Right margin
*/
.mr-0       { margin-right: $spacing-size-0 + px !important; }
.mr-s       { margin-right: $spacing-size-s + px !important; }
.mr-m       { margin-right: $spacing-size-m + px !important; }
.mr-l       { margin-right: $spacing-size-l + px !important; }
.mr-xl      { margin-right: $spacing-size-xl + px !important; }

/*
    Bottom margin
*/
.mb-0       { margin-bottom: $spacing-size-0 + px !important; }
.mb-s       { margin-bottom: $spacing-size-s + px !important; }
.mb-m       { margin-bottom: $spacing-size-m + px !important; }
.mb-l       { margin-bottom: $spacing-size-l + px !important; }
.mb-xl      { margin-bottom: $spacing-size-xl + px !important; }

/*
    Left margin
*/
.ml-0       { margin-left: $spacing-size-0 + px !important; }
.ml-s       { margin-left: $spacing-size-s + px !important; }
.ml-m       { margin-left: $spacing-size-m + px !important; }
.ml-l       { margin-left: $spacing-size-l + px !important; }
.ml-xl      { margin-left: $spacing-size-xl + px !important; }