@import './variables.scss';
@import './mixins/_negative-margin.scss';

$spacing-properties: (
    'p': 'padding',
    'm': 'margin',
);

$spacing-axes: (
    'x': (
        'left',
        'right',
    ),
    'y': (
        'top',
        'bottom',
    ),
);

$spacing-directions: (
    'b': 'bottom',
    't': 'top',
    'r': 'right',
    'l': 'left',
    's': 'inline-start',
    'e': 'inline-end',
);

@each $property-key, $property-name in $spacing-properties {
    .#{$property-key} {
        @each $direction-key, $direction-name in $spacing-directions {
            &#{$direction-key} {
                // Direction and number spacing, like "mt-0", "pr-1", "mb-2", "pl-3"
                @each $size-name, $size-value in $all-sizes {
                    $i: index($all-sizes, $size-name $size-value) - 1;
                    &-#{$i} {
                        #{$property-name}-#{$direction-name}: all-size(
                            $i
                        ) !important;
                    }
                }
            }
        }

        @each $spacing-axis, $spacing-axis-directions in $spacing-axes {
            // Axis and number based spacing, like "mx-*", "px-*", "my-*", "py-*"
            @each $size-name, $size-value in $all-sizes {
                $i: index($all-sizes, $size-name $size-value) - 1;
                &#{$spacing-axis}-#{$i} {
                    @each $spacing-axis-direction in $spacing-axis-directions {
                        #{$property-name}-#{$spacing-axis-direction}: all-size(
                            $i
                        ) !important;
                    }
                }
            }
        }

        // Number based spacings, like "m-*" and "p-*"
        @each $size-name, $size-value in $all-sizes {
            $i: index($all-sizes, $size-name $size-value) - 1;
            &-#{$i} {
                #{$property-name}: all-size($i) !important;
            }
        }
    }
}

.m {
    @each $direction-key, $direction-name in $spacing-directions {
        &#{$direction-key} {
            // Direction based spacing, like "mt-auto", mb-auto"
            &-auto {
                margin-#{$direction-name}: auto !important;
            }
        }
    }

    @each $spacing-axis, $spacing-axis-directions in $spacing-axes {
        // Axis and auto spacing, like "mx-auto", "my-auto",
        &#{$spacing-axis}-auto {
            @each $spacing-axis-direction in $spacing-axis-directions {
                margin-#{$spacing-axis-direction}: auto !important;
            }
        }
    }

    // Auto spacing, "m-auto"
    &-auto {
        margin: auto !important;
    }

    // Negative margin eg. mn-1
    &n {
        @each $size-name, $size-value in $all-sizes {
            $i: index($all-sizes, $size-name $size-value) - 1;
            &-#{$i} {
                @include negative-margin(all-size($i));
            }
        }
    }
}