// base variables
$grid-gutter-medium: 30px !default;
$grid-gutter-small: 20px !default;
$global-width: 1100px;
$grid-max-width: $global-width + ($grid-gutter-medium * 2) !default;
$grid-columns: 12 !default;
// set your breakpoints
$breakpoint-small: 767px !default;
$breakpoint-medium: 992px !default;
$breakpoint-large: 1200px !default;
$breakpoint-xlarge: 1440px !default;
// set your queries
$small : '(min-width: 0)';
$small-only : '(max-width: ' + $breakpoint-small + ')';
$medium: '(min-width: ' + ($breakpoint-small + 1) + ')';
$medium-only: '(min-width: ' + $breakpoint-small + ') and (max-width: ' + ($breakpoint-medium - 1) + ')';
$medium-down: '(max-width: ' + ($breakpoint-medium) + ')';
$large: '(min-width: ' + $breakpoint-medium + ')';
$large-only: '(min-width: ' + $breakpoint-medium + ') and (max-width: ' + ($breakpoint-xlarge - 1) + ')';
$large-down: '(max-width: ' + $breakpoint-large + ')';
$xlarge: '(min-width: ' + $breakpoint-xlarge + ')';
$xlarge-down: '(max-width: ' + $breakpoint-xlarge + ')';
$xlarge-up: '(min-width: ' + ($breakpoint-large + 1) + ')';
// map your points
$breakpoints: (
	'small' $small,
	'medium' $medium,
	'large' $large,
	'xlarge' $xlarge,
) !default;
// Allow the query
@mixin breakpoint($media) {
	@media #{$media} {
		@content;
	}
}
.row {
	display: flex;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	list-style: none;
	-webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
	max-width: $global-width;
	// row within a row
	.row {
		margin-right: -($grid-gutter-medium / 2);
    	margin-left: -($grid-gutter-medium / 2);
	}
	// reverse rows
	&.reverse {
		flex-direction: row-reverse;
	}
	// columns
	.column,
	.columns {
		box-sizing: border-box;
	    min-width: initial;
		width: 100%;
		flex-grow: 1;
		padding-left: calc(#{$grid-gutter-medium} / 2);
		padding-right: calc(#{$grid-gutter-medium} / 2);
		@media #{$small-only} {
			padding-left: calc(#{$grid-gutter-small} / 2);
			padding-right: calc(#{$grid-gutter-small} / 2);
		}
		// reverse columns
		&.reverse {
			flex-direction: column-reverse;
		}
	}
}
// create the grid
@mixin create-grid($name) {
	@for $i from 0 through $grid-columns {
		@if $i != 0 {
			.#{$name}-#{$i} {
				flex: 0 0 percentage($i / $grid-columns);
				max-width: percentage($i / $grid-columns);
			}
		}
		// offset
		.#{$name}-jump-#{$i} {
			margin-left: percentage($i / $grid-columns);
		}
		// uncollapse
		.#{$name}-uncollapse {
			> .columns {
				padding-right: ($grid-gutter-medium / 2);
    			padding-left: ($grid-gutter-medium / 2);
			}
		}
		// collapse
		.#{$name}-collapse {
			> .columns {
				padding-right: 0;
    			padding-left: 0;
			}
		}
		//blockgrid
		.#{$name}-contain-#{$i} {
			> .column {
				flex: 0 0 (100% / $i);
			    max-width: (100% / $i);
			}
		}
	}
}
// create text based alignments
@mixin create-alignments($name) {
	// align texts center
	.#{$name}-text-center {
		text-align: center;
	}
	// .. left
	.#{$name}-text-left {
		text-align: left;
	}
	// .. right
	.#{$name}-text-right {
		text-align: right;
	}
}
// create text based display
@mixin create-hiders($name) {
	// align texts center
	.hide-for-#{$name} {
		display: none!important;
	}
	// .. left
	.show-for-#{$name} {
		display: inline-flex!important;
	}
}
// create the grid within the MQ points
@each $breakpoint in $breakpoints {
	$name: nth($breakpoint, 1);
	$declaration: nth($breakpoint, 2);
	@media screen and #{$declaration} {
		@include create-grid($name);
		@include create-alignments($name);
		@include create-hiders($name);
	}
}