$grid-gutter: 1rem !default;


div[class^='grid-'],
div[class*=' grid-'] {
	float: left;
	padding-right: $grid-gutter;
	@media screen and (max-width: $very-small-limit) {
		&:not(.never-alone) {
			width: 100%;
			padding-right: 0;
		}
	}
	table, textarea, select, input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=file], input[type=date], input[type=datetime-local], input[type=month], input[type=time], input[type=week] {
		width: 100%;
	}
	.select2-container {
		min-width: auto;
		width: 100% !important;
	}
	&.newline {
		clear: both;
	}

	&.cell,
	div.dataview &,
	form.quixote & {
		clear: none;
		&.newline {
			clear: both;
		}
	}

	div.dataview &,
	form & {
		@if $grid-gutter != 0px {
			box-sizing: content-box;
		} @else {
			padding-right: 1rem;  // force gutter for form fields
		}
		~ h3, ~ h4 {
			// give additional padding to compensate the margin being
			// "absorbed" by the floating element.
			padding-top: 1rem;
		}
	}

	form & {
		~ h3, ~ h4, ~ p, + div {
			clear: both;
		}
		span.select2-selection,
		div.select2-container {
			width: 100% !important;
		}
	}

	div.dataview & {
		~ div.title, ~ div.subtitle {
			clear: both;
		}
	}

	@if $grid-gutter != 0px {
		// only define property if some gutter is requested
		.gru-content #columns > &.cell {
			padding-right: 0;
			margin-right: $grid-gutter;
		}
	}
}

// compute width of elements
@each $i in 1, 2, 3, 4, 6, 12 {
	@for $j from 1 through $i {
		.grid-#{$j}-#{$i} {
			width: calc( #{100*$j/$i+0%} - #{$grid-gutter});
			@media screen and ($max-mobile-viewport) {
				@if $i == 4 and $j <= 2 { width: calc(50% - #{$grid-gutter}); }
				@else if $i == 4 and $j >  2 { width: calc(100% - #{$grid-gutter}); }
				@else if $i == 6 and $j <= 2 { width: calc(#{100/3+0%} - #{$grid-gutter}); }
				@else if $i == 6 and $j == 3 { width: calc(50% - #{$grid-gutter}); }
				@else if $i == 6 and $j <= 5 { width: calc(#{200/3+0%} - #{$grid-gutter}); }
				@else if $i == 6 and $j == 6 { width: calc(100% - #{$grid-gutter}); }
				@else if $i == 12 and $j <= 4 { width: calc(#{100/3+0%} - #{$grid-gutter}); }
				@else if $i == 12 and $j <= 7 { width: calc(50% - #{$grid-gutter}); }
				@else if $i == 12 and $j <= 11 { width: calc(#{200/3+0%} - #{$grid-gutter}); }
				@else if $i == 12 and $j == 12 { width: calc(100% - #{$grid-gutter}); }
			}
		}
	}
}
