@mixin transition($speed: $speed, $easing: $easing, $delay: 0ms, $element: all) {
    transition: $element $speed $easing $delay;
}

// Setup margins and padding
@mixin margin-padding ($sizes, $device: null) {
    @each $class, $size in $spacingSizes {
        .m-#{$class}#{$device} {
            margin: #{$size} !important;
        }
        
        .mt-#{$class}#{$device} {
            margin-top: #{$size} !important;
        }

        .mb-#{$class}#{$device} {
            margin-bottom: #{$size} !important;
        }

        .my-#{$class}#{$device} {
            margin-top: #{$size} !important;
            margin-bottom: #{$size} !important;
        }

        .ml-#{$class}#{$device} {
            margin-left: #{$size} !important;
        }

        .mr-#{$class}#{$device} {
            margin-right: #{$size} !important;
        }

        .mx-#{$class}#{$device} {
            margin-left: #{$size} !important;
            margin-right: #{$size} !important;
        }

        .p-#{$class}#{$device} {
            padding: #{$size} !important;
        }

        .pt-#{$class}#{$device} {
            padding-top: #{$size} !important;
        }

        .pb-#{$class}#{$device} {
            padding-bottom: #{$size} !important;
        }

        .py-#{$class}#{$device} {
            padding-top: #{$size} !important;
            padding-bottom: #{$size} !important;
        }

        .pl-#{$class}#{$device} {
            padding-left: #{$size} !important;
        }

        .pr-#{$class}#{$device} {
            padding-right: #{$size} !important;
        }

        .px-#{$class}#{$device} {
            padding-left: #{$size} !important;
            padding-right: #{$size} !important;
        }
    }
}