$susy: (
	math: fluid,
	output: isolate,
	gutter-position: after,
	container: auto,
	column-width: false,
	global-box-sizing: border-box,
	flow: map-get($grid, flow),
	container-position: map-get($grid, container-position),
	columns: 1 1 2 3 4 5 12,
	gutters: map-get($grid, gutters),
	use-custom: (
			box-sizing: false,
	)
);

@if $ui != true {

	.grid {
		position: relative;
		transition: left 300ms ease, right 300ms ease !important;
		@include container(map-get($grid, container-width));
	}

	.grid-main {
		@if map-get($grid, container-width) != 100% {
			padding: 0 $spacing/4;
		}
	}

	[class*='col-']:last-of-type,
	.col-1-3:nth-child(3n+0),
	.col-1-4:nth-child(4n+0),
	.col-1-5:nth-child(5n+0),
	.col-1-12:nth-child(12n+0), {
		margin-right: 0;
	}

	[class*='col-'] {
		overflow: hidden;
	}

}

@mixin desktop-grid() {

	.grid-main {
		@if map-get($grid, container-width) != 100% {
			padding: 0 $spacing;
		}
	}

	.col-1-1 {
		@include span(12 of 12);
	}
	.col-2-3, .col-8-12 {
		@include span(8 of 12);
	}

	.col-1-2, .col-6-12, .col-2-4 {
		@include span(6 of 12);
	}

	.col-1-3, .col-4-12 {
		@include span(4 of 12);
	}

	.col-1-4, .col-3-12 {
		@include span(3 of 12);
	}

	.col-1-5 {
		@include span(2 of 10);
	}

	.col-2-5 {
		@include span(4 of 10);
	}

	.col-3-5 {
		@include span(6 of 10);
	}

	.col-4-5 {
		@include span(8 of 10);
	}

	.col-1-12 {
		@include span(1 of 12);
	}

	.col-2-12 {
		@include span(2 of 12);
	}

	.col-11-12 {
		@include span(11 of 12);
	}

	.col-10-12 {
		@include span(10 of 12);
	}

	.col-9-12, .col-3-4 {
		@include span(9 of 12);
	}

	.col-5-12 {
		@include span(5 of 12);
	}

	.col-7-12 {
		@include span(7 of 12);
	}

	.push-right {
		float: right;
		margin-left: $spacing;
		margin-right: 0;
	}

}

@mixin grid-fixed() {
	.grid-fixed {

		& > [class*='col-'] {
			height: 100%;
			position: fixed;
			overflow-y: auto;
		}

		& > .col-1-1 {
			@include span(12 of 12);
		}
		& > .col-2-3, & > .col-8-12 {
			@include span(8 of 12);
		}

		& > .col-1-2, & > .col-6-12, & > .col-2-4 {
			@include span(6 of 12);
		}

		& > .col-1-3, & > .col-4-12 {
			@include span(4 of 12);
		}

		& > .col-1-4, & > .col-3-12 {
			@include span(3 of 12);
		}

		& > .col-1-5 {
			@include span(2 of 10);
		}

		& > .col-2-5 {
			@include span(4 of 10);
		}

		& > .col-3-5 {
			@include span(6 of 10);
		}

		& > .col-4-5 {
			@include span(8 of 10);
		}

		& > .col-1-12 {
			@include span(1 of 12);
		}

		& > .col-2-12 {
			@include span(2 of 12);
		}

		& > .col-11-12 {
			@include span(11 of 12);
		}

		& > .col-10-12 {
			@include span(10 of 12);
		}

		& > .col-9-12, & > .col-3-4 {
			@include span(9 of 12);
		}

		& > .col-5-12 {
			@include span(5 of 12);
		}

		& > .col-7-12 {
			@include span(7 of 12);
		}

		& > .push-right {
			right: 0;
		}
	}
}

@mixin tablet-grid() {

	.grid-main {
		@if map-get($grid, container-width) != 100% {
			padding: 0 $spacing/2;
		}
	}

	.col-1-1 {
		@include span(12 of 12);
	}

	.col-2-3 {
		@include span(8 of 12);
	}

	.col-1-2, .col-2-4 {
		@include span(6 of 12);
	}

	.col-1-3 {
		@include span(4 of 12);
	}

	.col-1-4 {
		@include span(3 of 12);
	}

	.col-3-4 {
		@include span(9 of 12);
	}

	.push-right {
		float: right;
		margin-left: $spacing;
		margin-right: 0;
	}
}

@mixin mobile-grid() {  }