/**
 * @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");
    }
    &-container-fluid {
      @extend %container-base;
    }

    // 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%;
    }

    // Alignment
    // All items
    &-align-items {
      &-start {
        align-items: flex-start !important;
      }
      &-center {
        align-items: center !important;
      }
      &-end {
        align-items: flex-end !important;
      }
    }
    // Item self
    &-align-self {
      &-start {
        align-self: flex-start !important;
      }
      &-center {
        align-self: center !important;
      }
      &-end {
        align-self: flex-end !important;
      }
    }
    // Horizontal alignment 
    &-justify-content {
      &-start {
        justify-content: flex-start !important;
      }
      &-center {
        justify-content: center !important;
      }
      &-end {
        justify-content: flex-end !important;
      }
      &-around {
        justify-content: space-around !important;
      }
      &-between {
        justify-content: space-between !important;
      }
      &-evenly {
        justify-content: space-evenly !important;
      }
    }
  } 

  // Create non-breakpoint specific columns and column offsets
  @for $i from 1 through $grid-columns {
    .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-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;