@use "sass:list";
@use "sass:math";

@use "../00-config/00-variables/vars-grid" as *;
@use "../01-helpers/02-mixins" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Visual grid
// *
// * visualize a grid using an overlay
// *
////////////////////////////////////////////////////////////////////////////////

$l: ();

@for $i from 1 through $grid-columns {
  $j: $i + 1;
  $l: list.append($l, $visual-grid-color calc(#{math.div(100%, $grid-columns) * $i} + (var(--gap-hor) / 2)), comma);
  $l: list.append($l, $visual-grid-color calc(#{math.div(100%, $grid-columns) * $j} - (var(--gap-hor) / 2)), comma);
  $l: list.append($l, transparent calc(#{math.div(100%, $grid-columns) * $j} - (var(--gap-hor) / 2)), comma);
  $l: list.append($l, transparent calc(#{math.div(100%, $grid-columns) * $j} + (var(--gap-hor) / 2)), comma);
}

@if $visual-grid == true {
  body::before {
    position: fixed !important;
    right: 0 !important;
    left: 0 !important;
    display: inline-block !important;
    height: 100% !important;
    width: 100% !important;
    max-width: var(--max-width) !important;
    margin: 0 auto !important;
    background-image: linear-gradient(
      to right,
      transparent,
      transparent calc(var(--gap-hor) / 2),
      $visual-grid-color calc(var(--gap-hor) / 2),
      $visual-grid-color calc(50% - (var(--gap-hor) / 2)),
      transparent calc(50% - (var(--gap-hor) / 2)),
      transparent calc(50% + (var(--gap-hor) / 2)),
      $visual-grid-color calc(50% + (var(--gap-hor) / 2)),
      $visual-grid-color calc(100% - (var(--gap-hor) / 2)),
      transparent calc(100% - (var(--gap-hor) / 2)), transparent 100%
    );
    content: "" !important;
    opacity: $visual-grid-opacity;
    pointer-events: none !important;

    @if $visual-grid-index == back {
      z-index: -1 !important;
    }
    @else if $visual-grid-index == front {
      @include z-index(grid-overlay, important);
    }

    @include bp-sm {
      background-image: linear-gradient(
        to right,
        transparent ,
        transparent calc(var(--gap-hor) / 2),
        $visual-grid-color calc(var(--gap-hor) / 2),
        $visual-grid-color calc(#{math.div(100%, $grid-columns)} - (var(--gap-hor) / 2)),
        transparent calc(#{math.div(100%, $grid-columns)} - (var(--gap-hor) / 2)),
        transparent calc(#{math.div(100%, $grid-columns)} + (var(--gap-hor) / 2)),
        $l,
        $visual-grid-color calc(-100% + (var(--gap-hor) / 2)),
        $visual-grid-color calc(100% - (var(--gap-hor) / 2)),
        transparent calc(100% - (var(--gap-hor) / 2)),
        transparent 100%
      );
    }
  }
}
