// ============================================================================
// :: Grid
// ============================================================================

// ============================================================================
// :: Settings
// ============================================================================
// The width of every column in a 12-column grid.
$_grid-col-1: 100% / 12;
$_grid-col-2: 100% / 6;
$_grid-col-3: 100% / 4;
$_grid-col-4: 33.3%;
$_grid-col-5: 100% / 12 * 5;
$_grid-col-6: 49.9%;
$_grid-col-7: 100% / 12 * 7;
$_grid-col-8: 66.5%;
$_grid-col-9: 100% / 12 * 9;
$_grid-col-10: 100% / 12 * 10;
$_grid-col-11: 100% / 12 * 11;
$_grid-col-12: 100%;

// ============================================================================
// :: Root
// ============================================================================
%__grid-base {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

// ============================================================================
// :: Elements - row
// ============================================================================
%__grid-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  [class*="l-grid__col"] {
    flex-grow: 0;
    flex-shrink: 0;
  }
}

// ============================================================================
// :: Elements - col
// ============================================================================
%__grid-col {
  flex-grow: 1;
  flex-shrink: 1;
  align-self: auto;
}

%__grid-col-1-12 {
  @extend %__grid-col;

  width: $_grid-col-2;

  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-1;
  }
}

%__grid-col-2-12 {
  @extend %__grid-col;

  width: $_grid-col-4;

  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-2;
  }
}

%__grid-col-3-12 {
  @extend %__grid-col;

  width: $_grid-col-12;

  @include respond-at($breakpoint-tablet-default) {
    width: $_grid-col-5;
  }
  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-3;
  }
}

%__grid-col-4-12 {
  @extend %__grid-col;

  width: $_grid-col-12;

  @include respond-at($breakpoint-tablet-default) {
    width: $_grid-col-6;
  }
  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-4;
  }
}

%__grid-col-5-12 {
  @extend %__grid-col;

  width: $_grid-col-12;

  @include respond-at($breakpoint-tablet-default) {
    width: $_grid-col-6;
  }
  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-5;
  }
}

%__grid-col-6-12 {
  @extend %__grid-col;

  width: $_grid-col-12;

  @include respond-at($breakpoint-tablet-default) {
    width: $_grid-col-6;
  }
}

%__grid-col-7-12 {
  @extend %__grid-col;

  width: $_grid-col-12;

  @include respond-at($breakpoint-tablet-default) {
    width: $_grid-col-6;
  }
  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-7;
  }
}

%__grid-col-8-12 {
  @extend %__grid-col;

  width: $_grid-col-12;

  @include respond-at($breakpoint-tablet-default) {
    width: $_grid-col-6;
  }
  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-8;
  }
}

%__grid-col-9-12 {
  @extend %__grid-col;

  width: $_grid-col-12;

  @include respond-at($breakpoint-tablet-default) {
    width: $_grid-col-7;
  }
  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-9;
  }
}

%__grid-col-10-12 {
  @extend %__grid-col;

  width: $_grid-col-8;

  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-10;
  }
}

%__grid-col-11-12 {
  @extend %__grid-col;

  width: $_grid-col-10;

  @include respond-at($breakpoint-desktop-default) {
    width: $_grid-col-11;
  }
}

%__grid-col-12-12 {
  @extend %__grid-col;

  width: $_grid-col-12;
}

// ============================================================================
// :: Modifiers - with margins
// ============================================================================
/**
 * The --with-margins modifier adds horizontal and vertical margin or spacing
 * between every column.
 */
%__grid-with-margins-base {
  @extend %__grid-base;

  width: calc(100% + #{$grid-spacing-mobile-default});
  margin: calc((#{$grid-spacing-mobile-default} * -0.5));

  @include respond-at($breakpoint-tablet-default) {
    width: calc(100% + #{$grid-spacing-tablet-default});
    margin: calc((#{$grid-spacing-tablet-default} * -0.5));
  }

  @include respond-at($breakpoint-desktop-default) {
    width: calc(100% + #{$grid-spacing-desktop-default});
    margin: calc((#{$grid-spacing-desktop-default} * -0.5));
  }

  @include respond-at($breakpoint-desktop-large) {
    width: calc(100% + #{$grid-spacing-desktop-large});
    margin: calc((#{$grid-spacing-desktop-large} * -0.5));
  }
}

%__grid-with-margins-col {
  @extend %__grid-col;

  flex-grow: 0;
  flex-shrink: 0;
  margin: #{$grid-spacing-mobile-default / 2};

  @include respond-at($breakpoint-tablet-default) {
    margin: #{$grid-spacing-tablet-default / 2};
  }
  @include respond-at($breakpoint-desktop-default) {
    margin: #{$grid-spacing-desktop-default / 2};
  }
  @include respond-at($breakpoint-desktop-large) {
    margin: #{$grid-spacing-desktop-large / 2};
  }
}

%__grid-with-margins-col-1-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-2} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-2} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-1} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-1} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-2-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-4} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-4} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-2} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-2} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-3-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-5} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-3} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-3} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-4-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-6} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-4} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-4} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-5-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-5} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-5} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-5} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-6-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-12} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-6} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-6} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-7-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-7} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-7} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-7} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-8-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-6} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-8} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-8} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-9-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-7} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-9} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-9} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-10-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-8} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-8} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-10} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-10} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-11-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-10} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-10} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-10} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-11} - #{$grid-spacing-desktop-large});
  }
}

%__grid-with-margins-col-12-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-12} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-12} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-12} - #{$grid-spacing-desktop-large});
  }
}

// ============================================================================
// :: Modifiers - with margins
// ============================================================================
%__grid-with-margins-desktop {
  @extend %__grid-with-margins-base;

  @include respond-to($breakpoint-tablet-default) {
    width: 100%;
    margin: 0;
  }
}

%__grid-with-margins-col-desktop {
  @extend %__grid-with-margins-col;

  @include respond-to($breakpoint-tablet-default) {
    margin: 0;
    width: 100%;
  }
}

// ============================================================================
// :: Modifiers - normalize with margins
// ============================================================================
%__grid-normalize-with-margins {
  @extend %__grid-with-margins-base;
}

%__grid-normalize-with-margins-col-6-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-6} - #{$grid-spacing-mobile-default});

  @include respond-at($breakpoint-tablet-default) {
    width: calc(#{$_grid-col-6} - #{$grid-spacing-tablet-default});
  }
  @include respond-at($breakpoint-desktop-default) {
    width: calc(#{$_grid-col-6} - #{$grid-spacing-desktop-default});
  }
  @include respond-at($breakpoint-desktop-large) {
    width: calc(#{$_grid-col-6} - #{$grid-spacing-desktop-large});
  }
}

%__grid-normalize-with-margins-col-12-12 {
  @extend %__grid-with-margins-col;

  width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});
}