//----Grid settings----//
// Check your zeplin for rights settings.

//-- XL
$nbCol-xl: 12 !default;
$gap-xl: 50px !default;
$max-width-xl: 1200px !default;
$row-xl: 360px !default;

//--S
$nbCol-s: 4 !default;
$gap-s: 50px !default;
$max-width-s: 1200px !default;
$row-s: 20px !default;

//----Content style----//
%grid--lg {
  max-width: $max-width-xl;
  margin   : 0 auto;
}

%grid {
  width     : 100%;
  max-width : $max-width-s;

  margin    : 0 auto;
  padding   : 0;

  list-style: none;

  @media screen and (min-width:1024px) {
    max-width: $max-width-xl;
    padding  : 0;
  }

  //--- grid supported ---//
  @supports (display:grid) {
    display              : grid;

    grid-template-columns: repeat($nbCol-s, 1fr);
    grid-column-gap      : $gap-s;
    grid-row-gap         : $row-s;
    // grid-template-rows: repeat($row-s);
    @media screen and (min-width:1024px) {
      grid-template-columns: repeat($nbCol-xl, 1fr);
      grid-column-gap      : $gap-xl;
      // grid-template-rows: repeat($row-xl);
      grid-row-gap         : $gap-xl;
    }

  }

  //--- grid not supported ---//
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;

    @media screen and (min-width:1024px) {
      display        : flex;
      flex-wrap      : wrap;
      justify-content: space-between;
    }
  }

  &--center {
    justify-content: center;
  }
}

%grid--full {
  width     : 100%;
  padding   : 25px;

  list-style: none;

  @media screen and (min-width:1024px) {
    padding: 0;
  }

  //--- grid supported ---//
  @supports (display:grid) {
    display              : grid;

    grid-template-columns: repeat($nbCol-s, 1fr);
    grid-column-gap      : $gap-s;
    grid-row-gap         : $row-s;
    // grid-template-rows: repeat($row-s);
    @media screen and (min-width:1024px) {
      grid-template-columns: repeat($nbCol-xl, 1fr);
      grid-column-gap      : $gap-xl;
      grid-column-row      : $row-xl;
      // grid-template-rows: repeat($row-xl);
      // grid-row-gap: $gap-xl;
    }

  }

  //--- grid not supported ---//
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;

    @media screen and (min-width:1024px) {
      display        : flex;
      flex-wrap      : wrap;
      justify-content: space-between;
    }
  }

  &--center {
    justify-content: center;
  }
}

.grid {
  @extend %grid;
}

.grid--full {
  @extend %grid--full;
}

.grid--lg {
  @extend %grid--lg;
}

@mixin set-out($nbCol) {
  width: calc(#{($max-width-xl / $nbCol-xl) * $nbCol} + (100vw - #{$max-width-xl}) / 2);
  //--- grid not supported ---//
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @media screen and (min-width:1024px) {
      position: absolute;
      top     : 0;
      right   : 0;
    }
  }
}

@mixin set-col($bp, $nbCol, $start: auto) {
  max-width: 100%;
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    // Responsive Grid
    $nbColumn: $nbCol-xl / $nbCol;
    @if ($bp) {

      @include media-min($bp) {
        @if ($nbCol == 12) {
          width: 100%;
        }
        @elseif ($start != auto) {
          width            : calc((100% - (#{$nbColumn - 1} * #{$gap-xl})) / #{$nbColumn});
          grid-column-start: $start;
        } @else {
          width: calc((100% - (#{$nbColumn - 1} * #{$gap-xl})) / #{$nbColumn});
        }
      }

    }

    // Basic Grid
  @else

    {

      @if ($nbCol == 12) {
        grid-column: 1 / -1;
      }
      @elseif ($start) {
        grid-column: $start / span #{$nbCol};
      } @else {
        width: calc((100% - (#{$nbCol - 1} * #{$gap-xl})) / #{$nbCol-xl});
      }

    }

  }

  @supports (display: grid) {
    // Responsive Grid
    @if ($bp) {

      @include media-min($bp) {
        @if ($nbCol == 12) {
          grid-column: 1 / -1;
        }
        @elseif ($start != auto) {
          grid-column      : auto / span #{$nbCol};
          grid-column-start: $start;
        } @else {
          grid-column: auto / span #{$nbCol};
        }
      }

    }

    // Basic Grid
  @else

    {

      @if ($nbCol == 12) {
        grid-column: 1 / -1;
      }
      @elseif ($start) {
        grid-column: $start / span #{$nbCol};
      } @else {
        grid-column      : auto / span #{$nbCol};
        grid-column-start: 1;
      }

    }
  }

}

@mixin set-row($bp, $start) {
  @include media-min($bp) {
    grid-row-start: $start;
  }
}

@mixin set-wCol($nbColumn) {
  max-width: 100%;
  @media screen and (min-width:1200px) {
    max-width: $max-width-xl;
  }
  @supports (display: grid) {
    $nbColumn: $nbCol-xl / $nbColumn;
    width    : calc((#{$max-width-xl} - (#{$nbColumn - 1} * #{$gap-xl})) / #{$nbColumn});
  }
}

@each $bp in $breakpoints {
  $key: nth($bp, 1);
  @for $i from 1 through $nbCol-xl {
    $nbColumn: $nbCol-xl / $i;

    @if $key == "s" or $key == "xs" or $key == "sm" {
      $nbColumn: $nbCol-s / $i;
    }

    //responsive column
    .c#{$key}--#{$i} {
      @include media-min($key) {
        @supports (display: grid) {
          @if ($i == 12) {
            grid-column: 1 / -1;
          } @else {
            grid-column: auto / span #{$i};
          }
        }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          width: calc((100% - (#{$nbColumn - 1} * #{$gap-xl})) / #{$nbColumn});
        }
      }

      &.grid {
        grid-template-columns: repeat(#{$i}, 1fr);
      }
    }

    .col-#{$key}-#{$i} {
      @include media-min($key) {
        @supports (display: grid) {
          @if ($i == 12) {
            grid-column: 1 / -1;
          } @else {
            grid-column: auto / span #{$i};
          }
        }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          width: calc((100% - (#{$nbColumn - 1} * #{$gap-xl})) / #{$nbColumn});
        }
      }

      &.grid {
        grid-template-columns: repeat(#{$i}, 1fr);
      }
    }

    //row
    .r#{$key}--#{$i} {
      @include media-min($key) {
        grid-row: auto / span #{$i};
      }
    }

    //order
    .o#{$key}--#{$i} {
      @include media-min($key) {
        order: #{$i};
      }
    }

  }
}