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

$j-prefix-grid: "#{$j-prefix}-grid" !default;
$j-prefix-grid-item: "#{$j-prefix}-grid-item" !default;
$grid-space: 5 !default;
$grid-space-step: 2.5 !default;
$grid-space-start: 2.5 !default;

.#{$j-prefix-grid} {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    &[data-dir="row"] {
        flex-direction: row;
    }
    &[data-dir="row-reverse"] {
        flex-direction: row-reverse;
    }
    &[data-dir="column"] {
        flex-direction: column;
    }
    &[data-dir="column-reverse"] {
        flex-direction: column-reverse;
    }

    &[data-jc="start"] {
        justify-content: flex-start;
    }
    &[data-jc="end"] {
        justify-content: flex-end;
    }
    &[data-jc="center"] {
        justify-content: center;
    }
    &[data-jc="space-between"] {
        justify-content: space-between;
    }
    &[data-jc="space-around"] {
        justify-content: space-around;
    }

    &[data-ai="start"] {
        align-items: flex-start;
    }
    &[data-ai="end"] {
        align-items: flex-end;
    }
    &[data-ai="center"] {
        align-items: center;
    }
    &[data-ai="baseline"] {
        align-items: baseline;
    }
    &[data-ai="stretch"] {
        align-items: stretch;
    }

    &[data-ac="start"] {
        align-content: flex-start;
    }
    &[data-ac="end"] {
        align-content: flex-end;
    }
    &[data-ac="center"] {
        align-content: center;
    }
    &[data-ac="space-between"] {
        align-content: space-between;
    }
    &[data-ac="space-around"] {
        align-content: space-around;
    }
    &[data-ac="stretch"] {
        align-content: stretch;
    }

    &[data-width="auto"] {
        > .#{$j-prefix-grid-item} {
            flex-basis: auto;
            width: auto;
        }

        // &::after {
        //     flex: auto;
        //     content: "";
        // }
    }

    @for $i from 1 through $grid-space {
        &[data-space="#{$i}"] {
            margin-left: -#{$i * $grid-space-step + $grid-space-start}px;
            margin-right: -#{$i * $grid-space-step + $grid-space-start}px;
            width: calc(100% + #{($i * $grid-space-step + $grid-space-start) * 2}px);

            > .#{$j-prefix-grid-item} {
                padding-right: #{$i * $grid-space-step + $grid-space-start}px;
                padding-left: #{$i * $grid-space-step + $grid-space-start}px;
            }
        }
    }
}

.#{$j-prefix-grid-item} {
    display: block;
    box-sizing: border-box;
    // flex-grow: 1;
    // flex-basis: 0;
    width: 100%;
    // max-width: 100%;
    flex: 1 1 0;

    &[data-as="start"] {
        align-self: flex-start;
    }
    &[data-as="end"] {
        align-self: flex-end;
    }
    &[data-as="center"] {
        align-self: center;
    }
    &[data-as="baseline"] {
        align-self: baseline;
    }
    &[data-as="stretch"] {
        align-self: stretch;
    }

    @for $i from 1 through $grid-space {
        &[data-space="#{$i}"] {
            padding-top: #{$i * $grid-space-step + $grid-space-start}px;
            padding-bottom: #{$i * $grid-space-step + $grid-space-start}px;
        }
    }

    &[data-elg="auto"] {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

    &[data-elg="default"] {
        flex: 1 1 0;
    }
}

// Дефолтная сетка
@for $i from 1 through $j-columns {
    .#{$j-prefix-grid-item}[data-elg="#{$i}"] {
        flex-basis: percentage($i / $j-columns);
        max-width: percentage($i / $j-columns);
    }
}

// Адаптивная сетка
@each $point, $value in $j-breakpoints {
    @include j-media($point, "max") {
        .#{$j-prefix-grid-item} {
            &[data-#{$point}="auto"] {
                // flex-basis: auto;
                width: auto;
                max-width: none;
                flex: 0 0 auto;
            }

            &[data-#{$point}="default"] {
                flex: 1 1 0;
            }
        }
    }

    @for $i from 1 through $j-columns {
        @include j-media($point, "max") {
            .#{$j-prefix-grid-item} {
                &[data-#{$point}="#{$i}"] {
                    flex-basis: percentage($i / $j-columns);
                    max-width: percentage($i / $j-columns);
                }

                &[data-as-#{$point}="start"] {
                    align-self: flex-start;
                }
                &[data-as-#{$point}="end"] {
                    align-self: flex-end;
                }
                &[data-as-#{$point}="center"] {
                    align-self: center;
                }
                &[data-as-#{$point}="baseline"] {
                    align-self: baseline;
                }
                &[data-as-#{$point}="stretch"] {
                    align-self: stretch;
                }

                @for $i from 1 through $grid-space {
                    &[data-space-#{$point}="#{$i}"] {
                        padding-top: #{$i * $grid-space-step + $grid-space-start}px;
                        padding-bottom: #{$i * $grid-space-step + $grid-space-start}px;
                    }
                }
            }

            .#{$j-prefix-grid} {
                @for $i from 1 through $grid-space {
                    &[data-space-#{$point}="#{$i}"] {
                        margin-left: -#{$i * $grid-space-step + $grid-space-start}px;
                        margin-right: -#{$i * $grid-space-step + $grid-space-start}px;
                        width: calc(100% + #{($i * $grid-space-step + $grid-space-start) * 2}px);

                        > .#{$j-prefix-grid-item} {
                            padding-right: #{$i * $grid-space-step + $grid-space-start}px;
                            padding-left: #{$i * $grid-space-step + $grid-space-start}px;
                        }
                    }
                }

                &[data-dir-#{$point}="row"] {
                    flex-direction: row;
                }
                &[data-dir-#{$point}="row-reverse"] {
                    flex-direction: row-reverse;
                }
                &[data-dir-#{$point}="column"] {
                    flex-direction: column;
                }
                &[data-dir-#{$point}="column-reverse"] {
                    flex-direction: column-reverse;
                }

                &[data-jc-#{$point}="start"] {
                    justify-content: flex-start;
                }
                &[data-jc-#{$point}="end"] {
                    justify-content: flex-end;
                }
                &[data-jc-#{$point}="center"] {
                    justify-content: center;
                }
                &[data-jc-#{$point}="space-between"] {
                    justify-content: space-between;
                }
                &[data-jc-#{$point}="space-around"] {
                    justify-content: space-around;
                }

                &[data-ai-#{$point}="start"] {
                    align-items: flex-start;
                }
                &[data-ai-#{$point}="end"] {
                    align-items: flex-end;
                }
                &[data-ai-#{$point}="center"] {
                    align-items: center;
                }
                &[data-ai-#{$point}="baseline"] {
                    align-items: baseline;
                }
                &[data-ai-#{$point}="stretch"] {
                    align-items: stretch;
                }

                &[data-ac-#{$point}="start"] {
                    align-content: flex-start;
                }
                &[data-ac-#{$point}="end"] {
                    align-content: flex-end;
                }
                &[data-ac-#{$point}="center"] {
                    align-content: center;
                }
                &[data-ac-#{$point}="space-between"] {
                    align-content: space-between;
                }
                &[data-ac-#{$point}="space-around"] {
                    align-content: space-around;
                }
                &[data-ac-#{$point}="stretch"] {
                    align-content: stretch;
                }
            }
        }
    }
}