@use "sass:map";
@use "sass:math";

@use "./../../Container/styles/config" as container;
@use "./../../../styles/tools/generate";
@use "./../../../styles/tools/layout";
@use "./../../../styles/tokens/breakpoint";
@use "./../../../styles/tokens/space";
@use "./config";

@function safe-md-grid-gap($gap) {
  @return min(
    #{$gap},
    calc(
      (100vw - #{map.get(container.$container-widths, "md")}) / 2 +
        #{container.$container-padding}
    )
  );
}

@function safe-md-negative-grid-margin($gap) {
  @return max(
    -#{$gap},
    calc(
      (#{map.get(container.$container-widths, "md")} - 100vw) / 2 -
        #{container.$container-padding}
    )
  );
}

@mixin grid-base() {
  display: flex;
  max-width: none;
  flex-wrap: wrap;
  list-style-type: none;
  padding-left: 0;

  /* Fixes VoiceOver no announcing unordered lists */
  > li::before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
  }
}

@mixin grid-column-gap(
  $size: "default",
  $column-gap: config.$column-gap,
  $force-important: false
) {
  $gap: map.get($column-gap, $size);

  @if ($size == "default" or $size == "small") {
    @if ($size == "default" and not $force-important) {
      margin-left: -$gap;
      margin-right: -$gap;
    } @else {
      margin-left: -$gap !important;
      margin-right: -$gap !important;
    }
  } @else {
    // Clamp bleed only in md band where large gutters can exceed container side room.
    @include breakpoint.get("md", "only") {
      margin-left: safe-md-negative-grid-margin($gap) !important;
      margin-right: safe-md-negative-grid-margin($gap) !important;
    }

    @include breakpoint.get("lg") {
      margin-left: -$gap !important;
      margin-right: -$gap !important;
    }
  }
}

@mixin grid-column-gap-responsive(
  $size: "default",
  $column-gap: config.$column-gap
) {
  @include grid-column-gap($size, $column-gap, true);
}

@mixin grid-with-equal-height-content(
  $grid-col-selector: '[class*="grid__col"]'
) {
  > #{$grid-col-selector} {
    display: flex;
    flex-direction: column;

    > * {
      flex-shrink: 1;
      flex-grow: 1;
    }

    > [data-same-height-child] {
      flex-grow: 0 !important;
    }

    > :not([data-same-height-child]) {
      flex-grow: 1 !important;
    }
  }
}

@mixin grid-row-gap(
  $size: "medium",
  $grid-col-selector: '[class*="grid__col"]'
) {
  margin-top: #{space.get($size) * -1};

  > #{$grid-col-selector} {
    @include layout.reset-last-child-margin-bottom;

    margin-top: space.get($size);
  }
}

@mixin grid-col-base() {
  flex: 1 0 100%;
  max-width: 100%;
}

@mixin grid-col-column-gap(
  $size: "default",
  $column-gap: config.$column-gap,
  $force-important: false
) {
  $gap: map.get($column-gap, $size);

  @if ($size == "default" and not $force-important) {
    padding-left: $gap;
    padding-right: $gap;
  } @else if ($size == "small") {
    padding-left: $gap !important;
    padding-right: $gap !important;
  } @else {
    @include breakpoint.get("md", "only") {
      padding-left: safe-md-grid-gap($gap) !important;
      padding-right: safe-md-grid-gap($gap) !important;
    }

    @include breakpoint.get("lg") {
      padding-left: $gap !important;
      padding-right: $gap !important;
    }
  }
}

@mixin grid-col-column-gap-responsive(
  $size: "default",
  $column-gap: config.$column-gap
) {
  @include grid-col-column-gap($size, $column-gap, true);
}

@mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {
  flex-basis: math.div(100%, $grid-base) * $width;
  max-width: math.div(100%, $grid-base) * $width;
}

@mixin column-fill {
  flex: 1 0 auto;
  max-width: 100%;
}

@mixin column-shrink {
  flex: 0 1;
  flex-basis: 0%;
  max-width: none;
}

@mixin column-auto {
  flex: 1 1;
  flex-basis: 0%;
  max-width: 100%;
}

@mixin column-classes() {
  *[class*="grid__col"] {
    @include grid-col-base();
  }

  @include breakpoint.each using ($breakpoint) {
    .grid__col-#{generate.variant-name($breakpoint, "-")}-shrink {
      @include column-shrink;
    }

    .grid__col-#{generate.variant-name($breakpoint, "-")}-fill {
      @include column-fill;
    }

    .grid__col-#{generate.variant-name($breakpoint, "-")}-auto {
      @include column-auto;
    }

    @for $i from 1 through config.$grid-base {
      .grid__col-#{generate.variant-name($breakpoint, "-")}-#{$i} {
        @include column-size($i);
      }
    }
  }
}