// ######################
// SIZE HELPERS
// ######################
@each $prop, $abbrev in (height: h, width: w) {

    @for $index from 0 through 128 {
        $size: $index * 4;
        $length: #{$size}px;

        .#{$abbrev}-#{$size} {
            #{$prop}: $length !important;
            min-#{$prop}: $length !important;
            max-#{$prop}: $length !important;
        }
    }

    // Percentage
    @for $i from 0 through 20 {
        $i-p: 5 * $i;
        $size-p: 5% * $i;

        .#{$abbrev}-#{$i-p}-p {
            #{$prop}: $size-p !important;
        }
    }
}

// ######################
// SPACING HELPERS
// ######################
@each $prop, $abbrev in (margin: m, padding: p) {

    @for $index from 0 through 64 {
        $size: $index * 4;
        $length: #{$size}px;

        .#{$abbrev}-#{$size} {
            #{$prop}: $length !important;
        }
    }

    @for $index from 0 through 64 {
        $size: $index * 4;
        $length: #{$size}px;

        .#{$abbrev}x-#{$size} {
            #{$prop}-right: $length !important;
            #{$prop}-left: $length !important;
        }

        .#{$abbrev}y-#{$size} {
            #{$prop}-top: $length !important;
            #{$prop}-bottom: $length !important;
        }
    }

    @for $index from 0 through 64 {
        $size: $index * 4;
        $length: #{$size}px;

        .#{$abbrev}t-#{$size} {
            #{$prop}-top: $length !important;
        }

        .#{$abbrev}r-#{$size} {
            #{$prop}-right: $length !important;
        }

        .#{$abbrev}b-#{$size} {
            #{$prop}-bottom: $length !important;
        }

        .#{$abbrev}l-#{$size} {
            #{$prop}-left: $length !important;
        }
    }
}

// Some special margin utils for flex alignments
.m-auto {
    margin: auto !important;
}

.mt-auto {
    margin-top: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
