$plain-ui__spacing-direction: (
    'top',
    'bottom',
    'left',
    'right'
) !default;

$plain-ui__helpers__spacing-gap: 0.25 !default;
$plain-ui__helpers__spacing-steps: 10 !default;

/**
 *
 *
 */
@mixin spacing($class, $style, $direction, $name, $value, $breakpoints: 0)
{
    .#{$class}-#{$direction}-#{$name} {
        #{$style}-#{$direction}: $value;
    }
}

@each $direction in $plain-ui__spacing-direction {

    @include spacing('m', 'margin', $direction, 0, 0);
    @include spacing('m', 'margin', $direction, 1, 1px);

    @for $i from 2 through $plain-ui__helpers__spacing-steps {
        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
        @include spacing('m', 'margin', $direction, $i, $value);
        //@include plain-ui__breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
    }
}

@each $direction in $plain-ui__spacing-direction {

    @include spacing('p', 'padding', $direction, 0, 0);
    @include spacing('p', 'padding', $direction, 1, 1px);

    @for $i from 0 through $plain-ui__helpers__spacing-steps {
        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
        @include spacing('p', 'padding', $direction, $i, $value);
        //@include plain-ui__breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
    }
}