@use 'sass:map';
@use 'sass:math';
@use 'sass:list';
@use '../02-tokens/maps' as maps;

// ==========================================================================
// EDS Grid System
// A 12-column responsive grid using EDS breakpoints and spacing tokens.
//
// Usage:
//   <div class="eds-container">
//     <div class="eds-row">
//       <div class="eds-col-12 eds-col-m-6 eds-col-l-4">Column</div>
//       <div class="eds-col-12 eds-col-m-6 eds-col-l-8">Column</div>
//     </div>
//   </div>
//
// Breakpoint prefixes (mobile-first):
//   (none) = xs (0+)
//   -s     = 480px+
//   -m     = 768px+
//   -l     = 996px+
//   -xl    = 1140px+
//   -2xl   = 1600px+
// ==========================================================================

// --- Configuration ---

$grid-columns: 12 !default;
$grid-gutter: var(--eds-sp-m) !default;

// Breakpoints from EDS tokens
$grid-breakpoints: maps.$breakpoint-size-map;

// Add a base breakpoint at 0 for always-active classes (no prefix)
$grid-breakpoints-with-base: map.merge((base: 0), $grid-breakpoints);

// Container max-widths per breakpoint
$grid-containers: (
  's': 768px,
  'm': 996px,
  'l': 1140px,
  'xl': 1440px,
  '2xl': 1600px,
) !default;

// --- Breakpoint helpers ---

@function _breakpoint-min($name) {
  $min: map.get($grid-breakpoints-with-base, $name);
  @if $min and $min != 0 {
    @return $min;
  }
  @return null;
}

@function _breakpoint-infix($name) {
  @if $name == 'base' {
    @return '';
  }
  @if _breakpoint-min($name) == null {
    @return '';
  }
  @return '-#{$name}';
}

@mixin _breakpoint-up($name) {
  $min: _breakpoint-min($name);
  @if $min {
    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// --- Container ---

.eds-container {
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: $grid-gutter;
  width: 100%;

  @each $breakpoint, $max-width in $grid-containers {
    @include _breakpoint-up($breakpoint) {
      max-width: $max-width;
    }
  }
}

.eds-container-fluid {
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: $grid-gutter;
  width: 100%;
}

// --- Row ---

.eds-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(#{$grid-gutter} * -0.5);
}

.eds-row-no-gutters {
  margin-inline: 0;

  > .eds-col,
  > [class*='eds-col-'] {
    padding-inline: 0;
  }
}

// --- Columns base styles ---

.eds-col,
[class*='eds-col-'] {
  box-sizing: border-box;
  min-height: 1px;
  padding-inline: calc(#{$grid-gutter} * 0.5);
  position: relative;
  width: 100%;
}

// Auto-width column
.eds-col {
  flex: 1 0 0%;
  max-width: 100%;
}

// --- Generate grid classes for each breakpoint ---

@each $breakpoint, $bp-value in $grid-breakpoints-with-base {
  $infix: _breakpoint-infix($breakpoint);

  @include _breakpoint-up($breakpoint) {
    // Auto-width column at breakpoint
    .eds-col#{$infix}-auto {
      flex: 0 0 auto;
      max-width: none;
      width: auto;
    }

    // Sized columns
    @for $i from 1 through $grid-columns {
      .eds-col#{$infix}-#{$i} {
        flex: 0 0 math.percentage(math.div($i, $grid-columns));
        max-width: math.percentage(math.div($i, $grid-columns));
      }
    }

    // Offsets
    @for $i from 0 through ($grid-columns - 1) {
      @if not($infix == '' and $i == 0) {
        .eds-offset#{$infix}-#{$i} {
          margin-inline-start: math.percentage(
            math.div($i, $grid-columns)
          );
        }
      }
    }

    // Order utilities
    .eds-order#{$infix}-first {
      order: -1;
    }
    .eds-order#{$infix}-last {
      order: $grid-columns + 1;
    }
    @for $i from 0 through $grid-columns {
      .eds-order#{$infix}-#{$i} {
        order: $i;
      }
    }
  }
}

// --- Row alignment utilities ---

.eds-row-align-start {
  align-items: flex-start;
}

.eds-row-align-center {
  align-items: center;
}

.eds-row-align-end {
  align-items: flex-end;
}

.eds-row-align-stretch {
  align-items: stretch;
}

.eds-row-justify-start {
  justify-content: flex-start;
}

.eds-row-justify-center {
  justify-content: center;
}

.eds-row-justify-end {
  justify-content: flex-end;
}

.eds-row-justify-between {
  justify-content: space-between;
}

.eds-row-justify-around {
  justify-content: space-around;
}

.eds-row-justify-evenly {
  justify-content: space-evenly;
}

// --- Column self-alignment ---

.eds-col-align-start {
  align-self: flex-start;
}

.eds-col-align-center {
  align-self: center;
}

.eds-col-align-end {
  align-self: flex-end;
}

.eds-col-align-stretch {
  align-self: stretch;
}