/* ==========================================================================
   UTILITIES / #RESPONSIVE SPACING
   ========================================================================== */

/**
 * Responsive utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   u-margin-top@medium
 *   u-margin-top<medium
 */

/* Spacing utilities will override any matching property declarations */

$global-spacing-directions: (
    -top,
    -right,
    -bottom,
    -left,
);

$global-spacing-properties: (
    padding,
    margin
);

$global-breakpoint-properties: (
    tablet,
);

$global-breakpoint-queries: (
    from,
    until
);

$global-spacing-sizes: (
    null: 25px,
    -tiny: 5px,
    -small: 15px,
    -large: 35px,
) !default;

/* stylelint-disable max-nesting-depth  */

@each $property in $global-spacing-properties {
    @each $direction in $global-spacing-directions {
        @each $breakpoint in $global-breakpoint-properties {
            @each $query in $global-breakpoint-queries {
                $all: null;

                @if ($query == from) {
                    @each $size, $value in $global-spacing-sizes {
                        .u-#{$property}#{$direction}#{$all}#{$size}\@tablet {
                            @include mq($from: 840px) {
                                #{$property}#{$direction}: $value !important;
                            }
                        }
                    }
                }

                @each $size, $value in $global-spacing-sizes {
                    .u-#{$property}#{$direction}#{$all}#{$size}\<tablet {
                        @include mq($until: 840px) {
                            #{$property}#{$direction}: $value !important;
                        }
                    }
                }
            }
        }
    }
}