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

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

/**
 *
 *
 *
 */

.marginless {
    margin: 0;
}

.paddingless {
    padding: 0;
}


/**
 *  spacing for single padding or margin
 *
 *
 */
@mixin spacing($class, $style, $direction, $name, $value)
{
    .#{$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__spacing-steps {
        $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
        @include spacing('m', 'margin', $direction, $i, $value);

        @include plain-ui__media-xs() {
            @include spacing('m', 'margin', $direction, 'xs-' + $i, $value);
        }

        @include plain-ui__media-sm() {
            @include spacing('m', 'margin', $direction, 'sm-' + $i, $value);
        }

        @include plain-ui__media-md() {
            @include spacing('m', 'margin', $direction, 'md-' + $i, $value);
        }

        @include plain-ui__media-lg() {
            @include spacing('m', 'margin', $direction, 'lg-' + $i, $value);
        }

        @include plain-ui__media-xlg() {
            @include spacing('m', 'margin', $direction, 'xlg-' + $i, $value);
        }
    }
}

@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__spacing-steps {
        $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
        @include spacing('p', 'padding', $direction, $i, $value);

        @include plain-ui__media-xs() {
            @include spacing('p', 'padding', $direction, 'xs-' + $i, $value);
        }

        @include plain-ui__media-sm() {
            @include spacing('p', 'padding', $direction, 'sm-' + $i, $value);
        }

        @include plain-ui__media-md() {
            @include spacing('p', 'padding', $direction, 'md-' + $i, $value);
        }

        @include plain-ui__media-lg() {
            @include spacing('p', 'padding', $direction, 'lg-' + $i, $value);
        }

        @include plain-ui__media-xlg() {
            @include spacing('p', 'padding', $direction, 'xlg-' + $i, $value);
        }
    }
}