@import '~/css/helpers';

$columns: 12;
$columns-mobile: 4;
$gap: (
  mobile: 16px,
  desktop: 24px
);
$margin: (
  mobile: 16px,
  desktop: 24px
);
$fixed-width: 1280px;

@mixin apply-grid($type: 'fluid') {
  display: grid;
  width: 100%;
  height: 100%;
  grid-gap: var(--gap);
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

  @if $type == 'fluid' {
    padding: 0 var(--margin);
  } @else if $type == 'fixed' {
    margin: 0 auto;
    max-width: var(--width);
  }
}

@mixin responsive-settings {
  --columns: #{$columns};
  --gap: #{tovw(map-get($gap, 'desktop'), map-get($gap, 'desktop'))};
  --margin: #{tovw(map-get($margin, 'desktop'), map-get($margin, 'desktop'))};

  @include respond-to('mobile') {
    --columns: #{$columns-mobile};
    --gap: #{tovw(map-get($gap, 'mobile'), map-get($gap, 'mobile'))};
    --margin: #{tovw(map-get($margin, 'mobile'), map-get($margin, 'mobile'))};
  }

  --width: #{calc($fixed-width - (2 * var(--margin)))};
}

.grid {
  @include responsive-settings;

  position: fixed;
  z-index: 9999;
  background-image: linear-gradient(
    0deg,
    rgb(0 0 0 / 0.03) 50%,
    rgb(255 0 0 / 0.03) 50%
  );
  background-size: var(--gap) var(--gap);
  width: 100%;
  height: 100vh;
  inset: 0;

  span {
    opacity: 0.15;
    background: var(--inspect-color);
  }

  &--fluid {
    @include apply-grid('fluid');
  }

  &--fixed {
    @include apply-grid('fixed');
  }
}
