/* =============================== */
/* CSS for control sap.f/GridList  */
/* Base theme                      */
/* =============================== */

@_sap_f_GridList_ItemFocusBorderRadius: unset;
@_sap_f_GridList_ItemHighlightBorderRadius: 0;
@_sap_f_GridList_ItemFocusedHighlightOffset: 0;
@_sap_f_GridList_ItemOverflow: unset;

.sapFGridList {

	/* List headers overrides */
	& > .sapMListHdrText,
	& > .sapMListHdrTBar {
		margin-bottom: 0.5rem;
	}

	.sapMLIBCounter {
		padding-right: 1rem;
	}

	> .sapMListUl {
		> .sapMLIBFocusable:focus {
			outline: none;
		}

		> .sapMLIBFocusable:focus::after {
			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
			border-radius: @_sap_f_GridList_ItemFocusBorderRadius;
			position: absolute;
			content: ' ';
			top: 1px;
			right: 1px;
			bottom: 1px;
			left: 1px;
			z-index: 2;
			pointer-events: none;
		}
	}

}

.sapFGridList ul {
	margin-bottom: 0.5rem;
}

.sapFGridListDefault {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	grid-gap: 0.5rem 0.5rem;
}

/* List Group headers overrides. */
.sapFGridListGroup {

	& > .sapMLIB.sapMGHLI {
		background: none;
		border: none;
		padding-top: 0.25rem;
		grid-column: ~"1 / -1";
		width: 100%;

		& .sapMGHLITitle {
			font-size: 1.125rem;
			color: var(--sapGroup_TitleTextColor);
		}
	}
}

/* Overrides for various list items, except for GridListItem. It has its own independent styles */
.sapFGridList > .sapMListUl > .sapMLIB:not(.sapMGHLI):not(.sapFGLI) {
	border-radius: var(--sapTile_BorderCornerRadius);
	border: none;
	box-shadow: var(--sapContent_Shadow0);
	overflow: @_sap_f_GridList_ItemOverflow;

	/* Highlighted items */
	> .sapMLIBHighlight {
		border-top-left-radius: 0.25rem;
		border-bottom-left-radius: 0.25rem;
	}

	&.sapMLIBFocusable:focus > .sapMLIBHighlight {
		top: @_sap_f_GridList_ItemFocusedHighlightOffset;
		bottom: @_sap_f_GridList_ItemFocusedHighlightOffset;
		border-top-left-radius: @_sap_f_GridList_ItemHighlightBorderRadius;
		border-bottom-left-radius: @_sap_f_GridList_ItemHighlightBorderRadius;
	}

	> .sapMLIBContent {
		height: 100%;
	}
}

.sapFGridList > .sapMListUl.sapMGrowingList {
	border-radius: var(--sapTile_BorderCornerRadius);
}

.sapFGridList > .sapMListUl > .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;
}