$sizes: (
    "auto": auto,
    "0": 0px,
    "1": 2px,
    "2": 5px,
    "3": 8px,
    "4": 10px,
    "5": 15px
);
$directions: (
    "s": "left",
    "e": "right",
    "t": "top",
    "b": "bottom"
);

@each $size, $val in $sizes {
    .m-#{$size} {
        margin: $val;
    }
    @each $dir, $dir-val in $directions {
        .m#{$dir}-#{$size} {
            margin-#{$dir-val}: $val;
        }
        .p#{$dir}-#{$size} {
            padding-#{$dir-val}: $val;
        }

    }
    .mx-#{$size} {
        margin-left: $val;
        margin-right: $val;
    }
    .my-#{$size} {
        margin-top: $val;
        margin-right: $val;
    }
    .px-#{$size} {
        padding-left: $val;
        padding-right: $val;
    }
    .py-#{$size} {
        padding-top: $val;
        padding-bottom: $val;
    }
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.w-full {
    width: 100%;
}
.w-50 {
    width: 50%;
}
.d-flex {
    display: flex;
}
.cr-all {
    border-radius: $border-radius;
}
.cr-top {
    border-radius: $border-radius $border-radius 0px 0px;
}
.cr-right {
    border-radius: 0px $border-radius $border-radius 0px;
}
.cr-left {
    border-radius: $border-radius 0px 0px $border-radius;
}
.cr-bottom {
    border-radius: 0px 0px $border-radius $border-radius;
}