// ============================================================================
// :: Grid
// ============================================================================
/**
 * The grid layout is divided into columns and rows. By the use of flexbox the
 * layout is being manipulated by dividing it into columns. Once the width of
 * these columns exceeds the width of the container, the column will start on
 * a new row.
 *
 * The width of the grid can be divided into 12 columns. The sum of the width
 * of a full row of columns cannot exceed the 12 column limit in order for it
 * to completely fill the space.
 *
 * For example: col-1, col-3, col-3, col-4, col-1. The sum of these columns will
 * result into 12. All columns will be placed next to each other (on desktop)
 * and the space of the grid gets divided into these values. This means that
 * col-3 will take up 3/12 of the entire container, col-4 will take up 4/12 of
 * the container width and so on...
 *
 * Because of the use of breakpoints we can manipulate the grid further when the
 * viewport gets resized to handheld devices.
 *
 * By adding modifiers to the root element we give spacing in the form of margin
 * to the item and start subtracting its spacing from its width. Multiple
 * modifiers can be added to manipulate how these columns behave. The behaviour
 * of the component can also be changed when used within other components.
 */

// ============================================================================
// :: Settings
// ============================================================================
/**
 * The spacing between every item when a modifier is applied to create the
 * spacing.
 */
$grid-gutter: 36px !default;
$grid-gutter-row: $grid-gutter !default;

// 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
// ============================================================================
.l-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;


	@include respond-to($screen-small-base) {
		justify-content: center;
	}
}

// ============================================================================
// :: Elements - col & row
// ============================================================================
[class^="l-grid__col"] {
	align-self: auto;
	flex-grow: 1;
	flex-shrink: 1;
}

.l-grid__row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;

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

// ============================================================================
// :: Elements - col
// ============================================================================
.l-grid__col-1-12 {
	width: $_grid-col-2;

	@include respond-at($screen-medium-base) {
		width: $_grid-col-1;
	}
}

.l-grid__col-2-12 {
	width: $_grid-col-4;

	@include respond-at($screen-medium-base) {
		width: $_grid-col-2;
	}
}

.l-grid__col-3-12 {
	width: $_grid-col-12;

	@include respond-at($screen-small-base) {
		width: $_grid-col-5;
	}

	@include respond-at($screen-medium-base) {
		width: $_grid-col-3;
	}
}

.l-grid__col-4-12 {
	width: $_grid-col-12;

	@include respond-at($screen-small-base) {
		width: $_grid-col-6;
	}

	@include respond-at($screen-medium-base) {
		width: $_grid-col-4;
	}
}

.l-grid__col-5-12 {
	width: $_grid-col-12;

	@include respond-at($screen-small-base) {
		width: $_grid-col-6;
	}

	@include respond-at($screen-medium-base) {
		width: $_grid-col-5;
	}
}

.l-grid__col-6-12 {
	width: $_grid-col-12;

	@include respond-at($screen-small-base) {
		width: $_grid-col-6;
	}
}

.l-grid__col-7-12 {
	width: $_grid-col-12;

	@include respond-at($screen-small-base) {
		width: $_grid-col-6;
	}

	@include respond-at($screen-medium-base) {
		width: $_grid-col-7;
	}
}

.l-grid__col-8-12 {
	width: $_grid-col-12;

	@include respond-at($screen-small-base) {
		width: $_grid-col-6;
	}

	@include respond-at($screen-medium-base) {
		width: $_grid-col-8;
	}
}

.l-grid__col-9-12 {
	width: $_grid-col-12;

	@include respond-at($screen-small-base) {
		width: $_grid-col-7;
	}

	@include respond-at($screen-medium-base) {
		width: $_grid-col-9;
	}
}

.l-grid__col-10-12 {
	width: $_grid-col-8;

	@include respond-at($screen-medium-base) {
		width: $_grid-col-10;
	}
}

.l-grid__col-11-12 {
	width: $_grid-col-10;

	@include respond-at($screen-medium-base) {
		width: $_grid-col-11;
	}
}

.l-grid__col-12-12 {
	width: $_grid-col-12;
}

// ============================================================================
// :: Modifiers - with margins
// ============================================================================
/**
 * The --with-margins modifier adds horizontal and vertical margin or spacing
 * between every column.
 */
.l-grid--with-margins {
	width: calc(100% + #{$grid-gutter});
	margin: calc((#{$grid-gutter} / -2));

	[class*="l-grid__col"] {
		flex-grow: 0;
		flex-shrink: 0;
		margin: #{$grid-gutter-row / 2};


		@include respond-at($screen-medium-base) {
			margin: #{$grid-gutter-row / 2};
		}
	}

	.l-grid__col-1-12 {
		width: calc(#{$_grid-col-2} - #{$grid-gutter});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-1} - #{$grid-gutter});
		}
	}

	.l-grid__col-2-12 {
		width: calc(#{$_grid-col-4} - #{$grid-gutter});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-2} - #{$grid-gutter});
		}
	}

	.l-grid__col-3-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-6} - #{$grid-gutter});
		}

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-3} - #{$grid-gutter});
		}
	}

	.l-grid__col-4-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-6} - #{$grid-gutter	});
		}

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-4} - #{$grid-gutter});
		}
	}

	.l-grid__col-5-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-5} - #{$grid-gutter});
		}
	}

	.l-grid__col-6-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-6} - #{$grid-gutter});
		}
	}

	.l-grid__col-7-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-7} - #{$grid-gutter});
		}
	}

	.l-grid__col-8-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-6} - #{$grid-gutter});
		}

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-8} - #{$grid-gutter});
		}
	}

	.l-grid__col-9-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-7} - #{$grid-gutter});
		}

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-9} - #{$grid-gutter});
		}
	}

	.l-grid__col-10-12 {
		width: calc(#{$_grid-col-8} - #{$grid-gutter});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-10} - #{$grid-gutter});
		}
	}

	.l-grid__col-11-12 {
		width: calc(#{$_grid-col-10} - #{$grid-gutter});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-11} - #{$grid-gutter});
		}
	}

	.l-grid__col-12-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter});
	}
}

// ============================================================================
// :: GRID USED IN FORM
// ============================================================================
$grid-gutter-form: 4rem !default;
$grid-gutter-row-form: $grid-gutter-form !default;

.l-grid--form {
	width: calc(100% + #{$grid-gutter});

	transform: translateX(-($grid-gutter / 2));


	@include respond-at($screen-medium-base) {
		width: calc(100% + #{$grid-gutter-form});

		transform: translateX(-($grid-gutter-form / 2));
	}

	[class*="l-grid__col"] {
		flex-grow: 0;
		flex-shrink: 0;
		margin: 0.5rem #{$grid-gutter-row-form / 2};
	}

	.l-grid__col-1-12 {
		width: calc(#{$_grid-col-2} - #{$grid-gutter-form});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-1} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-2-12 {
		width: calc(#{$_grid-col-4} - #{$grid-gutter-form});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-2} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-3-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter-form});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-6} - #{$grid-gutter-form});
		}

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-3} - #{$grid-gutter-form}) !important; /* stylelint-disable-line */
		}
	}

	.l-grid__col-4-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter-form});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-6} - #{$grid-gutter-form	});
		}

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-4} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-5-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter-form});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-5} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-6-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter-form});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-6} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-7-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter-form});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-7} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-8-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter-form});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-6} - #{$grid-gutter-form});
		}

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-8} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-9-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter-form});

		@include respond-at($screen-small-base) {
			width: calc(#{$_grid-col-9} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-10-12 {
		width: calc(#{$_grid-col-8} - #{$grid-gutter-form});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-10} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-11-12 {
		width: calc(#{$_grid-col-10} - #{$grid-gutter-form});

		@include respond-at($screen-medium-base) {
			width: calc(#{$_grid-col-11} - #{$grid-gutter-form});
		}
	}

	.l-grid__col-12-12 {
		width: calc(#{$_grid-col-12} - #{$grid-gutter-form});
	}
}

// ============================================================================
// :: GRID USED for BLOG
// ============================================================================
.l-grid--articles {

	[class*="l-grid__col"] {
		margin: #{$grid-gutter-row * 1.2} #{$grid-gutter-row / 2};


		@include respond-at($screen-medium-base) {
			margin: #{$grid-gutter-row * 1.2}  #{$grid-gutter-row / 2};
		}
	}
}