/*-------------------- Content Spacing --------------------*/

// Variables
$sides: (top, bottom, left, right)
$spaces: (margin, padding)
$views: (mobile, tablet, desktop, widescreen, fullhd)

// Space range 1 to 500
@for $i from 1 through 500

    /*** Element Spacing ***/
    @each $space in $spaces
        .#{$space}-#{$i}
            #{$space}: #{$i}px !important

        .#{$space}-horizontal-#{$i}
            #{$space}-left: #{$i}px !important
            #{$space}-right: #{$i}px !important

        .#{$space}-vertical-#{$i}
            #{$space}-top: #{$i}px !important
            #{$space}-bottom: #{$i}px !important

        @each $side in $sides

            .#{$space}-#{$side}-#{$i}
                #{$space}-#{$side}: #{$i}px !important

        .no-#{$space}
            #{$space}: 0 !important

        /***  Responsive Margin Attributes ***/
        @each $view in $views
            "+%#{$view}"
                .#{$space}-#{$view}-#{$i}
                    #{$space}: #{$i}px !important

                .#{$space}-#{$view}-horizontal-#{$i}
                    #{$space}-left: #{$i}px !important
                    #{$space}-right: #{$i}px !important

                .#{$space}-#{$view}-vertical-#{$i}
                    #{$space}-top: #{$i}px !important
                    #{$space}-bottom: #{$i}px !important

                @each $side in $sides

                    .#{$space}-#{$view}-#{$side}-#{$i}
                        #{$space}-#{$side}: #{$i}px !important

                .no-#{$space}-#{$view}
                    #{$space}: 0px !important