// Import grid settings :
@import 'grid-settings';

// @include gridle_debug((
// 	mobile : (
// 		padding : 0,
// 		margin : 0,
// 		content : "hello world"
// 	),
// 	tablet : (
// 		padding : 0,
// 		coco : (
// 			myNewMap : "Content",
// 			hello : 10px,
// 			tablet : (
// 				padding : 0,
// 				coco : (
// 					myNewMap : "Content",
// 					hello : 10px
// 				)
// 			)
// 		)
// 	)
// ));
// @include gridle_debug("coco");
// @include gridle_debug((hello, world));

@include gridle_generate_custom_class( ('txt','-','align','-','center','@','%state') ) {
	text-align: center;
	content : "#{gridle_current_state_name()}";
}



@include gridle_selector(not-visible visible show hide, default mobile) {
	content : "your css...";
	@include gridle_state(mobile) {
		content : "you can even use the gridle_state mixin etc...";
	}
}

@include gridle_selector(grid) {
	content : "all grid selector";
}
@include gridle_selector(grid, mobile) {
	content : "all mobile grid selector";
}
@include gridle_selector(grid, mobile tablet) {
	content : "all mobile and tablet grid selector";
}
.selector {
	@include gridle_selector(hide) {
		content : "hide selector nested";
	}
}

.relative {
	@include gridle(2/3);
}

// gridle mixin
.gridle {
	@include gridle(2 of 12 at 10 gutter top left grid-centered true
		mobile 2 of 30 at 20
		tablet 10 gutter 20px 10px
	);
}

// layout
.layout {
	$context : (
		context : 50
	);
	@include gridle_layout((
		'.header' : 30 at 10 tablet 20 at 5,
		'.login' : 10 tablet 20 no-gutter,
		'.content' : 40,
		'.sidebar' : 10,
		'.footer' : 50
	), $context);
}

// standard grid mixins :
.grid-12 {
	@include gridle_grid(12);
}
.grid-1on5 {
	@include gridle_grid("1on5");
}
.grid-12-on-100 {
	@include gridle_grid(12, 100);
}
.grid-15-on-100-on-mobile {
	@include gridle_state(mobile) {
		@include gridle_grid(15, 100);
	}
}
.grid-set-1-on-4 {
	@include gridle_set( (
		grid : (1, 4)
	) );
}
.grid-30-on-100-on-mobile-and-tablet {
	@include gridle_grid(30, 100);
	@include gridle_state(mobile tablet) {
		@include gridle_grid(30, 100);
	}
}

// row
.grid-row {
	@include gridle_row();
}
.grid-row-set {
	@include gridle_set((
		row : true
	));
}

// clear each
.clear-each-2 {
	@include gridle_clear_each(2);
}
.clear-each-2-left {
	@include gridle_clear_each(2, left);
}
.clear-each-2-left-mobile {
	@include gridle_state(mobile) {
		@include gridle_clear_each(2, left);
	}
}
.clear-each-2-set {
	@include gridle_set((
		clear-each : ( 2, left )
	));
}

// gutter width
.gutter-width {
	@include gridle_gutter(100px);
	@include gridle_gutter((
		top : 10px,
		right : 50px,
		bottom : 10px,
		left : 50px
	));
	@include gridle_gutter(top left);
}
.gutter-width-set {
	@include gridle_set((
		gutter : 100px
	));
	content : "multple values";
	@include gridle_set((
		gutter : (
			top : 10px,
			right : 50px,
			bottom : 10px,
			left : 50px
		)
	));
	content : "multiple sides";
	@include gridle_set((
		gutter : top left,
		mobile : (
			gutter : 100px
		)
	));
}
.gutter-with-sizes-inline {
	@include gridle_gutter(10px 20px);
}
.gutter-with-sizes-inline--set {
	@include gridle_gutter(10px 20px);
	@include gridle_set( (
		gutter : 10px 20px
	) );
}
.gutter-with-sizes-inline-4 {
	@include gridle_gutter(5px 10px 15px 20px);
}
.gutter-with-sizes-inline-4--set {
	@include gridle_set( (
		gutter : 5px 10px 15px 20px
	) );
}

// centered
.centered {
	@include gridle_grid_centered();
}
.centered-mobile {
	@include gridle_state(mobile) {
		@include gridle_grid_centered();
	}
}

// align
$align : (left,center,right,top,middle,bottom);
@each $a in $align {
	.align-#{$a} {
		@include gridle_row_align($a);
	}
}

// push
.push-6 {
	@include gridle_push(6);
}
.push-12-mobile {
	@include gridle_state(mobile) {
		@include gridle_push(12);
	}
}
.push-set {
	@include gridle_set((
		push : 3
	));
}
.push-nested {
	@include gridle_push(3);
	@include gridle_state(mobile) {
		@include gridle_push(0);
	}
}

// pull
.pull-6 {
	@include gridle_pull(6);
}
.pull-12-mobile {
	@include gridle_state(mobile) {
		@include gridle_pull(12);
	}
}
.pull-set {
	@include gridle_set((
		pull : 3
	));
}
.pull-nested {
	@include gridle_pull(3);
	@include gridle_state(mobile) {
		@include gridle_pull(0);
	}
}

// prefix
.prefix-6 {
	@include gridle_prefix(6);
}
.prefix-12-mobile {
	@include gridle_state(mobile) {
		@include gridle_prefix(12);
	}
}
.prefix-set {
	@include gridle_set((
		prefix : 3
	));
}
.prefix-nested {
	@include gridle_prefix(3);
	@include gridle_state(mobile) {
		@include gridle_prefix(0);
	}
}

// suffix
.suffix-6 {
	@include gridle_suffix(6);
}
.suffix-12-mobile {
	@include gridle_state(mobile) {
		@include gridle_suffix(12);
	}
}
.suffix-set {
	@include gridle_set((
		suffix : 3
	));
}
.pull-suffix {
	@include gridle_suffix(3);
	@include gridle_state(mobile) {
		@include gridle_suffix(0);
	}
}

// hide
.hide {
	@include gridle_hide();
}
.hide-mobile {
	@include gridle_state(mobile) {
		@include gridle_hide();
	}
}
.hide-set {
	@include gridle_set((
		hide : true
	));
}

// show
.show {
	@include gridle_show();
}
.show-mobile {
	@include gridle_state(mobile) {
		@include gridle_show();
	}
}
.show-set {
	@include gridle_set((
		show : false
	));
}

// show_inline
.show_inline {
	@include gridle_show_inline();
}
.show_inline-mobile {
	@include gridle_state(mobile) {
		@include gridle_show_inline();
	}
}
.show_inline-set {
	@include gridle_set((
		show-inline : true
	));
}

// not_visible
.not_visible {
	@include gridle_not_visible();
}
.not_visible-mobile {
	@include gridle_state(mobile) {
		@include gridle_not_visible();
	}
}
.not_visible-set {
	@include gridle_set((
		not-visible : true
	));
}

// visible
.visible {
	@include gridle_visible();
}
.visible-mobile {
	@include gridle_state(mobile) {
		@include gridle_visible();
	}
}
.visible-set {
	@include gridle_set((
		visible : false
	));
}

// gridle state
.gridle-state {
	background: red;
	@include gridle_grid(8);

	@include gridle_state(mobile tablet) {
		background: pink;
		@include gridle_grid(12);
	}
	@include gridle_state((
		query : "only print"
	)) {
		background: yellow;
		@include gridle_grid(10);
	}
	@include gridle_state((
		max-width : 200px
	)) {
		background: green;
		@include gridle_grid(5);
	}

	@include gridle_state(200px, 600px) {
		content : "ad hoc state";
		background: white;
		@include gridle_grid(3);
	}
}

// gridle set
.gridle-set {
	@include gridle_set((
		grid : 6,
		push : 2,
		tablet : (
			grid : 8,
			push : 0,
		),
		clear : left,
		mobile : (
			grid : 12,
			push : 0,
			pull : 0
		)
	));
}
.gridle-set-multiple {
	@include gridle_set((
		grid : 6
	));
	@include gridle_set((
		grid : 12
	), mobile tablet);
}

// float-right
.float-right {
	@include gridle_float(right);
}
.float-left-mobile {
	@include gridle_state(mobile) {
		@include gridle_float(left);
	}
}
.float-set {
	@include gridle_set((
		float : right
	));
}

// clear
.clear {
	@include gridle_clear();
}
.clear-left-mobile {
	@include gridle_state(mobile) {
		@include gridle_clear(left);
	}
}
.clear-set {
	@include gridle_set((
		clear : left
	));
}

// gutters
.gutters {
	@include gridle_gutter();
}
.gutters-left {
	@include gridle_gutter(left);
}
.gutters-side-mobile {
	@include gridle_state(mobile) {
		@include gridle_gutter(left right);
	}
}

// no-gutter
.no-gutter {
	@include gridle_no_gutter();
}
.no-gutter-left {
	@include gridle_no_gutter(left);
}
.no-gutter-side-mobile {
	@include gridle_state(mobile) {
		@include gridle_no_gutter(left right);
	}
}

// gridle_get_states_count
.gridle_get_states_count {
	content: gridle_get_states_count();
}

// gridle_get_column_width
.gridle_get_column_width {
	content: gridle_get_column_width();
}
.gridle_get_column_width-mobile {
	content: gridle_get_column_width(1, mobile);
}
.gridle_get_column_width-2 {
	content: gridle_get_column_width(2);
}

// gridle_get_state
.gridle_get_state {
	content: "#{inspect(gridle_get_state(mobile))}";
}
.gridle_get_state-custom {
	content: "#{inspect(gridle_get_state((
		min-width : 200px,
		max-width : 600px
	)))}";
}

// gridle_has_state
.gridle_has_state-mobile {
	content : gridle_has_state(mobile);
}
.gridle_has_state-coco {
	content: gridle_has_state(coco);
}

// gridle_get_state_var
.gridle_get_state_var-context-mobile {
	content: gridle_get_state_var(context, mobile);
}

// gridle_set_state_var
.gridle_set_state_var {
	content : inspect(gridle_set_state_var(name, coucou, mobile));
}