@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> LAYOUT -> GRID
    ========================================================================  */

// Check if the elements with grid should be imported
@if $import-elements and $import-element-grid {
    .grid {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0 (0px - $grid-gutter);
        position: relative;

        // Nested selectors
        .grid__item {
            flex: 1 0 0;
            max-width: 100%;
            padding: 0 $grid-gutter;

            // Start a for loop
            @for $i from 1 through 12 {
                // Variables
                $width: (100% / 12) * $i;

                // Modifiers
                &.grid__item--offset-#{$i} {
                    margin-left: $width;
                }

                &.grid__item--span-#{$i} {
                    flex-basis: $width;
                    max-width: $width;
                }
            }

            // Modifiers
            &.grid__item--bottom {
                align-self: flex-end;
            }

            &.grid__item--middle {
                align-self: center;
            }

            &.grid__item--no-offset {
                margin-left: 0;
            }

            &.grid__item--stretch {
                align-self: stretch;
            }

            &.grid__item--top {
                align-self: flex-start;
            }
        }

        // Modifiers
        &.grid--around {
            justify-content: space-around;
        }

        &.grid--between {
            justify-content: space-between;
        }

        &.grid--bottom {
            align-items: flex-end;
        }

        &.grid--center {
            justify-content: center;
        }

        &.grid--column {
            flex-direction: column;

            // Nested selectors
            .grid__item {
                flex-basis: auto;
            }

            // Modifiers
            &.grid--reverse {
                flex-direction: column-reverse;
            }
        }

        &.grid--end {
            justify-content: flex-end;
        }

        &.grid--middle {
            align-items: center;
        }

        &.grid--nowrap {
            flex-wrap: nowrap;
        }

        &.grid--reverse {
            flex-direction: row-reverse;
        }

        &.grid--seamless {
            margin: 0;

            // Nested selectors
            .grid__item {
                padding: 0;
            }
        }

        &.grid--start {
            justify-content: flex-start;
        }

        &.grid--stretch {
            align-items: stretch;
        }

        &.grid--top {
            align-items: flex-start;
        }

        // Cycle through all of the breakpoints
        @each $breakpoint-name, $breakpoint-value in $breakpoints {
            // Breakpoint
            @include breakpoint($breakpoint-name) {
                // Modifiers
                &.grid--around\@#{$breakpoint-name} {
                    justify-content: space-around;
                }

                &.grid--between\@#{$breakpoint-name} {
                    justify-content: space-between;
                }

                &.grid--bottom\@#{$breakpoint-name} {
                    align-items: flex-end;
                }

                &.grid--center\@#{$breakpoint-name} {
                    justify-content: center;
                }

                &.grid--column\@#{$breakpoint-name} {
                    flex-direction: column;

                    // Nested selectors
                    .grid__item {
                        flex-basis: auto;
                    }

                    // Modifiers
                    &.grid--reverse {
                        flex-direction: column-reverse;
                    }
                }

                &.grid--end\@#{$breakpoint-name} {
                    justify-content: flex-end;
                }

                &.grid--nowrap\@#{$breakpoint-name} {
                    flex-wrap: nowrap;
                }

                &.grid--middle\@#{$breakpoint-name} {
                    align-items: center;
                }

                &.grid--reverse\@#{$breakpoint-name} {
                    flex-direction: row-reverse;
                }

                &.grid--top\@#{$breakpoint-name} {
                    align-items: flex-start;
                }

                &.grid--start\@#{$breakpoint-name} {
                    justify-content: flex-start;
                }

                &.grid--seamless\@#{$breakpoint-name} {
                    margin: 0;

                    // Nested selectors
                    .grid__item {
                        padding: 0;
                    }
                }

                // Nested selectors
                .grid__item {
                    // Start a for loop
                    @for $i from 1 through 12 {
                        // Variables
                        $width: (100% / 12) * $i;

                        // Modifiers
                        &.grid__item--offset-#{$i}\@#{$breakpoint-name} {
                            margin-left: $width;
                        }

                        &.grid__item--span-#{$i}\@#{$breakpoint-name} {
                            flex-basis: $width;
                            max-width: $width;
                        }
                    }

                    // Modifiers
                    &.grid__item--bottom\@#{$breakpoint-name} {
                        align-self: flex-end;
                    }

                    &.grid__item--middle\@#{$breakpoint-name} {
                        align-self: center;
                    }

                    &.grid__item--no-offset\@#{$breakpoint-name} {
                        margin-left: 0;
                    }

                    &.grid__item--top\@#{$breakpoint-name} {
                        align-self: flex-start;
                    }
                }
            }
        }
    }
}