/* ============================================= */
/* CSS for control sap.ui.layout/cssgrid.CSSGrid */
/* Base theme                                    */
/* ============================================= */

.sapUiLayoutCSSGrid {
	box-sizing: border-box;
}

.sapUiLayoutCSSGridBoxLayoutContainer {
	display: grid;
	grid-auto-rows: 1fr;
	grid-gap: 0.5rem 0.5rem;

	.sapUiLayoutCSSGridBoxLayoutGenerateBreakpoints(S);
	.sapUiLayoutCSSGridBoxLayoutGenerateBreakpoints(M);
	.sapUiLayoutCSSGridBoxLayoutGenerateBreakpoints(L);
	.sapUiLayoutCSSGridBoxLayoutGenerateBreakpoints(XL);
}

.sapUiLayoutCSSGridBoxLayoutContainer.sapFGridListGroup {
	grid-auto-rows: auto;
}

/* Mixins */

// Mixin to generate breakpoints. */
.sapUiLayoutCSSGridBoxLayoutGenerateBreakpoints(@size, @counter: 0, @i: 1) when (@i =< 12) {
	&.sapUiLayoutCSSGridBoxLayoutSize@{size}.sapUiLayoutCSSGridBoxLayoutSpan@{size}@{i} {
		grid-template-columns: repeat(auto-fit, minmax(calc(~"(100% - @{counter} * 0.5rem - 1px) / @{i}"), 1fr));
	}

	.sapUiLayoutCSSGridBoxLayoutGenerateBreakpoints(@size, (@counter + 1), (@i + 1));
}

.sapUiLayoutCSSGrid .sapUiBlockLayerTabbable {
	// There are "span" helpers, which purpose is to block navigation into the blocked controls content.
	// If the focus reaches the span before the blocked/busy control it is forwarded to the one after the control.
	// These spans should not be visible.
	position: absolute;
}

/* ResponsiveColumnLayout */
@_sap_ui_layout_CSSGrid_RCLColumns:
	S 4,
	M 8,
	ML 12,
	L 12,
	XL 16,
	XXL 20,
	XXXL 20;

.sapUiLayoutCSSGridRCL {

	.generateBreakpoint(@i: 1) when (@i <= length(@_sap_ui_layout_CSSGrid_RCLColumns)) {
		@pair: extract(@_sap_ui_layout_CSSGrid_RCLColumns, @i);
		@rangeName: extract(@pair, 1);
		@columns: extract(@pair, 2);
	
		.sapUiLayoutCSSGridRCL-Layout@{rangeName} &,
		.sapUiLayoutCSSGridRCL-Layout@{rangeName}& {
			grid-template-columns: repeat(@columns, minmax(0px, 1fr));
			grid-gap: 1rem;
		}
	
		.generateBreakpoint(@i + 1); // next iteration
	}

	.generateBreakpoint();
}

.sapUiLayoutCSSGridRCL {
	position: relative;
}