/* ==========================================================================
 * This grid can be turned on and off when you want to check
 * if everything is nice in place.
 * Set flag 'showGrid' to true in site.php
 * ========================================================================== */



// Color: Set a hue value that has enough contrast
$vg-hue: 					350; // 0-360

// Columns: Number of columns per viewport
$vg-column-count-s: 		$site-columns-s;
$vg-column-count-m: 		$site-columns-m;
$vg-column-count-l: 		$site-columns-l;


// Do some calculations and put them in variables for reuse
$vg-column-width-s: percentage(1 / $vg-column-count-s);
$vg-column-width-m: percentage(1 / $vg-column-count-m);
$vg-column-width-l: percentage(1 / $vg-column-count-l);
$vg-color-1: hsla($vg-hue, 100, 50, 0.07);
$vg-color-2: hsla($vg-hue, 100, 50, 0.04);


.u-visible-grid {
	@include z(z-visible-grid);
	@include contain;
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	pointer-events: none;

	/* 8 point grid lines */
	//background: repeating-linear-gradient(
	//	to bottom,
	//	hsla(0, 100, 50, 0.84) 0,
	//	hsla(0, 100, 50, 0) 1px,
	//	hsla(0, 100, 50, 0) 8px,
	//	hsla(200, 100, 50, 0.04) 8px
	//);

	@include mq(m, l) {
		padding: 0;
	}

}

.u-visible-grid__main {
	height: 100vh;

	background: repeating-linear-gradient(
			to right,
			$vg-color-1,
			$vg-color-1 $vg-column-width-s,
			$vg-color-2 $vg-column-width-s,
			$vg-color-2 ($vg-column-width-s * 2)
	);

	@include mq(m) {
		background: repeating-linear-gradient(
				to right,
				$vg-color-1,
				$vg-color-1 $vg-column-width-m,
				$vg-color-2 $vg-column-width-m,
				$vg-color-2 ($vg-column-width-m * 2)
		);
	}
	@include mq(l) {
		background: repeating-linear-gradient(
				to right,
				$vg-color-1,
				$vg-color-1 $vg-column-width-l,
				$vg-color-2 $vg-column-width-l,
				$vg-color-2 ($vg-column-width-l * 2)
		);
	}
}