/**
 * @file _grid.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 17.04.2025
 * @modified 23.05.2025
 * @@VERSION@@
 * @brief Styles für die Grid-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Grid-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 */

@use 'sass:math';
@use "sass:map";
@use '../utilities/maps';

@mixin kern-grid {
    // Settings
    $grid-columns: 12 !default;
    $grid-gutter: 2rem !default;

    // Container Elements
    %container-base {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: calc($grid-gutter * .5);
        padding-right: calc($grid-gutter * .5);
        box-sizing: border-box;
    }

    // // KERN Columns
    // [class^="kern-col"],
    // [class*="kern-col"] {
    //   padding: math.div($grid-gutter, 2);
    //   box-sizing: border-box;
    // }


    .kern {

        // Container
        &-container {
            @extend %container-base;
            max-width: map.get(maps.$grid-breakpoints, "xxl");

            // KERN Columns
            .kern-row {

                [class^="kern-col"],
                [class*="kern-col"] {
                    padding: math.div($grid-gutter, 2);
                    box-sizing: border-box;
                }
            }

        }

        &-container-fluid {
            @extend %container-base;

            // KERN Columns
            .kern-row {

                [class^="kern-col"],
                [class*="kern-col"] {
                    padding: math.div($grid-gutter, 2);
                    box-sizing: border-box;
                }
            }
        }

        // Row
        &-row {
            display: flex;
            flex-wrap: wrap;

            // &:first-of-type {
            //   margin-top: math.div($grid-gutter, -2);
            // }

            // &:last-of-type {
            //   margin-bottom: math.div($grid-gutter, -2);
            // }

            margin-left: math.div($grid-gutter, -2);
            margin-right: math.div($grid-gutter, -2);
            box-sizing: border-box;

            >* {
                flex-shrink: 0;
                width: 100%;
                max-width: 100%;
            }
        }

        // Col
        &-col {
            flex: 1 0 0%;
        }

    }

    // Create non-breakpoint specific columns and column offsets
    @for $i from 1 through $grid-columns {
        .kern-row {
            .kern-col-#{$i} {
                flex: 0 0 auto;
                width: (math.div(100%, $grid-columns) * $i);
            }

            .kern-col-offset-#{$i} {
                margin-left: (math.div(100%, $grid-columns) * $i);
            }
        }
    }

    // Create breakpoint specific columns
    @each $name, $value in maps.$grid-breakpoints {

        @if $value !=0 {
            @media (min-width: $value) {
                .kern-container {
                    max-width: map.get(maps.$container-max-widths, $name);
                }

                .kern-row {
                    .kern-col-#{$name}-offset-0 {
                        margin-left: 0;
                    }

                    @for $i from 1 through $grid-columns {
                        .kern-col-#{$name}-#{$i} {
                            width: (math.div(100%, $grid-columns) * $i);
                        }

                        .kern-col-#{$name}-offset-#{$i} {
                            margin-left: (math.div(100%, $grid-columns) * $i);
                        }
                    }
                }
            }
        }
    }
}

@include kern-grid;