/**
 *  Spacing
 *
 *  creates margin and padding for each direction and for each breakpont
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

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

$spacing-gap: 0.25 !default;
$spacing-steps: 10 !default;


/**
 *  mixin: spacing for single padding or margin
 *
 *
 */

@mixin spacing($class, $style, $name, $value, $direction: null)
{
    @if ($direction != null) {
        $class: $class + '-' + $direction;
        $style: $style + '-' + $direction;
    }

    .#{$class}-#{$name} {
        #{$style}: $value;
    }
}


/**
 *  mixin: spacing for each breakpoint
 *
 *
 */

@mixin spacing_breakpoints($class, $style, $i, $value, $direction: null)
{
    @include media-xs() {
        @include spacing($class, $style, 'xs-' + $i, $value, $direction);
    }

    @include media-sm() {
        @include spacing($class, $style, 'sm-' + $i, $value, $direction);
    }

    @include media-md() {
        @include spacing($class, $style, 'md-' + $i, $value, $direction);
    }

    @include media-lg() {
        @include spacing($class, $style, 'lg-' + $i, $value, $direction);
    }

    @include media-xlg() {
        @include spacing($class, $style, 'xlg-' + $i, $value, $direction);
    }
}


/**
 *
 *
 *
 */

.marginless {
    margin: 0;
}

.paddingless {
    padding: 0;
}

.m-last-child-0 {
    > *:last-child {
        margin: 0;
    }
}

.m-top-last-child-0 {
    > *:last-child {
        margin-top: 0;
    }
}

.m-bottom-last-child-0 {
    > *:last-child {
        margin-bottom: 0;
    }
}

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

@for $i from 2 through $spacing-steps {
    $value: $spacing-gap * factor($i - 1) * 1rem;
    @include spacing('m', 'margin', $i, $value);
    @include spacing_breakpoints('m', 'margin', $i, $value);
}

@each $direction in $spacing-direction
{
    @include spacing('m', 'margin', 0, 0, $direction);
    @include spacing_breakpoints('m', 'margin', 0, 0, $direction);

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

    @for $i from 2 through $spacing-steps {
        $value: $spacing-gap * factor($i - 1) * 1rem;
        @include spacing('m', 'margin', $i, $value, $direction);
        @include spacing_breakpoints('m', 'margin', $i, $value, $direction);
    }
}

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

@for $i from 0 through $spacing-steps {
    $value: $spacing-gap * factor($i - 1) * 1rem;
    @include spacing('p', 'padding', $i, $value);
    @include spacing_breakpoints('p', 'padding', $i, $value);
}

@each $direction in $spacing-direction
{
    @include spacing('p', 'padding', 0, 0, $direction);
    @include spacing_breakpoints('p', 'padding', 0, 0, $direction);

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

    @for $i from 0 through $spacing-steps {
        $value: $spacing-gap * factor($i - 1) * 1rem;
        @include spacing('p', 'padding', $i, $value, $direction);
        @include spacing_breakpoints('p', 'padding', $i, $value, $direction);
    }
}