/* Settings */
.o3-grid-extension {
	--margin: 16px;
	--max-width: 100%;
	--columns: 4;
	--gutter: 16px;
	--color-column: rgba(126, 195, 241, 0.25);
	--color-gutter: rgba(255, 0, 0, 0.25);
	--color-margin: rgba(255, 200, 0, 0.25);
	--color-text-description: rgba(126, 195, 241, 1);
	--help-text: 'XS';
}

.o3-grid-extension-overlay {
	position: fixed;
	display: flex;
	justify-content: center;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	min-width: 100vw;
	min-height: 100vh;
	z-index: 1000;
	pointer-events: none;
}

.o3-grid-extension {
	width: 100%;
	min-height: 100vh;
	display: flex;
	margin: 0 auto;
	max-width: var(--max-width);
	box-sizing: content-box;
	border-left: var(--margin) solid var(--color-margin);
	border-right: var(--margin) solid var(--color-margin);
}

.o3-grid-extension > * {
	background-color: var(--color-column);
	box-sizing: content-box;
	height: 100%;
	border-right: var(--gutter) solid var(--color-gutter);
	width: calc(var(--max-width) / var(--columns));
}

.o3-grid-extension .o3-grid-extension-grid-item:last-child {
	border-right: 0;
}

@media (min-width: 490px) {
	.o3-grid-extension {
		--help-text: 'S';
	}
}

@media (min-width: 740px) {
	.o3-grid-extension {
		--margin: 24px;
		--columns: 8;
		--help-text: 'M';
	}
}

@media (min-width: 1024px) {
	.o3-grid-extension {
		--columns: 12;
		--gutter: 24px;
		--help-text: 'L';
	}
}

@media (min-width: 1440px) {
	.o3-grid-extension {
		--help-text: 'XL';
	}
}

/* The container max width + 2 * margin (24px) is the min-width media query */
/* i.e. --max-width: 1312px + 2 * margin (24px) = 1360px */
@media (min-width: 1360px) {
	.o3-grid-extension {
		--max-width: 1312px;
		/* on bigger screen switch to box-shadow for margin colouring */
		border-left: 0;
		border-right: 0;
		box-shadow: 0 0 0 50vw var(--color-margin);
	}
}

.o3-grid-extension::after {
	content: var(--help-text);
	position: fixed;
	top: 1rem;
	left: 1rem;
	color: var(--color-text-description);
	font-size: 24px;
	font-weight: bold;
}
