@import "../var.scss";
@import "../mixins/media.scss";

$j-prefix-container: "#{$j-prefix}-container" !default;
$j-container-space: 4 !default;
$j-container-space-step: 5 !default;
$j-container-space-start: 10 !default;

.#{$j-prefix-container} {
    max-width: $j-container-width;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding-left: $j-offset;
    padding-right: $j-offset;
    transition: all 0.3s ease-in-out;

    &[data-space] {
        padding-left: #{$j-container-space-start}px;
        padding-right: #{$j-container-space-start}px;
    }

    @for $i from 1 through $j-container-space {
        &[data-space="#{$i}"] {
            padding-left: #{$i *
                $j-container-space-step +
                $j-container-space-start}px;
            padding-right: #{$i *
                $j-container-space-step +
                $j-container-space-start}px;
        }
    }
}

@each $point, $value in $j-breakpoints {
    @include j-media($point, "max") {
        @each $point_containers, $value in $j-containers {
            @if $point == $point_containers {
                .#{$j-prefix-container} {
                    max-width: $value;
                }
            }
        }

        @each $point_offsets, $value in $j-offsets {
            @if $point == $point_offsets {
                .#{$j-prefix-container} {
                    padding-left: $value;
                    padding-right: $value;

                    @for $i from 1 through $j-container-space {
                        &[data-space-#{$point_offsets}="#{$i}"] {
                            padding-left: #{$i *
                                $j-container-space-step +
                                $j-container-space-start}px;
                            padding-right: #{$i *
                                $j-container-space-step +
                                $j-container-space-start}px;
                        }
                    }
                }
            }
        }
    }
}