// sass-lint:disable SelectorFormat no-duplicate-properties

@mixin test-debug {
	/* Layouts: #{inspect($o-grid-layouts)} */
	/* Layout names: #{inspect($_o-grid-layout-names)} */
	/* Gutters: #{inspect($o-grid-gutters)} */
}

// Add default layouts
// a minimum of 2 layouts is required for o-grid to work
$o-grid-fixed-layout: z;
$o-grid-layouts: (
	x: 800px,
	z: 1200px,
);

@import '../main';

/**
 * Initial layouts and sizes: #{inspect($o-grid-layouts)}
 * Initial layout names: #{inspect($_o-grid-layout-names)}
 */

/**
 * Gutter for layout M should be removed since there's no M layout anymore:
 * Gutter M exists: #{map-has-key($o-grid-gutters, M)} // Should return false
 */

/**
 * Default gutter exists: #{map-has-key($o-grid-gutters, default)}
 */

@include oGridAddLayout($layout-name: a, $layout-width: 340px);
@include test-debug();
@include oGridRespondTo(a) {
	a {
		content: 'Max-width a: #{oGridGetMaxWidthForLayout(a)}';
		content: 'Gutter a: #{oGridGutter(a)}';
	}
}

@include oGridAddLayout($layout-name: y, $layout-width: 1100px, $gutter-width: 20px);
@include test-debug();
@include oGridRespondTo(y) {
	y {
		content: 'Max-width y: #{oGridGetMaxWidthForLayout(y)}';
		content: 'Gutter y: #{oGridGutter(y)}';
		content: 'Gutter a in y: #{oGridGutter(a)}';
		content: 'Gutter z: #{oGridGutter(z)}';
	}
}

@include oGridAddLayout($layout-name: b, $layout-width: 365px, $gutter-width: 30px);
@include test-debug();
@include oGridRespondTo(b) {
	b {
		content: 'Max-width b: #{oGridGetMaxWidthForLayout(b)}';
	}
}

// Reset gutters to only a default
$o-grid-gutters: (default: 20px);
@include oGridAddLayout($layout-name: c, $layout-width: 372px);
@include test-debug();

@include oGridRespondTo(c) {
	c {
		content: 'Gutter a after reset: #{oGridGutter(a)}';
		content: 'Gutter b after reset: #{oGridGutter(b)}';
		content: 'Gutter c after reset: #{oGridGutter(c)}';
		content: 'Gutter x after reset: #{oGridGutter(x)}';
		content: 'Gutter y after reset: #{oGridGutter(y)}';
	}
}

@include oGridRespondTo(z) {
	z {
		content: 'Max-width z: #{oGridGetMaxWidthForLayout(z)}';
	}
}

// Test the oGridColspan function
$colspans: ();
@each $human-friendly-name in (full-width, one-half, one-third, two-thirds, one-quarter, three-quarters) {
	$colspans: map-merge($colspans, (#{$human-friendly-name}: oGridColspan($human-friendly-name)));
}
/**
 * Human-friendly colspans: #{inspect($colspans)}
 * Fraction colspan: #{inspect($colspans)}
 */

// Just checking this compiles
el {
	@include oGridColspan((
		default: full-width,
		z: 6
	));
}