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

@_sap_ui_layout_Splitter_BarDecorationColors: var(--sapHighlightColor), fade(@sapUiHighlight, 0);
@_sap_ui_layout_Splitter_BarActiveDecorationColors: var(--sapHighlightColor), var(--sapHighlightColor);

/***** Desktop *****/

/* Cozy */
.sapFSP {
	height: 100%;
	display: flex;
	margin: 0;
	touch-action: none;

	/* Main content */
	.sapFSPMain {
		flex: 1 1;
		padding: 0.5rem;
		overflow: hidden auto;
	}

	/* Splitter */
	.sapFSPSplitterBar {
		cursor: col-resize;
		width: 1rem;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-left: none;
		border-right: none;
		vertical-align: top;
		color: var(--sapContent_IconColor);
		position: absolute;
		left: -1rem;

		&:focus {
			outline: none;
		}

		&:focus:not(:active)::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
		}

		.sapFSPSplitterBarDecorationBefore {
			width: 1rem;
			height: 4rem;
			background-image: linear-gradient(to top, @_sap_ui_layout_Splitter_BarDecorationColors);
			background-size: 0.0625rem 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		.sapFSPSplitterBarDecorationAfter {
			width: 1rem;
			height: 4rem;
			height: 4rem;
			background-image: linear-gradient(to bottom, @_sap_ui_layout_Splitter_BarDecorationColors);
			background-size: 0.0625rem 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		.sapFSPSplitterBarGrip {
			cursor: col-resize;
			width: 1.5rem;
			height: 2rem;
			line-height: 2rem;
			position: relative;
			z-index: 1;

			.sapFSPSplitterBarGripIcon {
				cursor: col-resize;
				line-height: ~"calc(1.625rem - var(--sapButton_BorderWidth) - var(--sapButton_BorderWidth); )";
				box-sizing: border-box;
				height: 1.625rem;
				width: 1.5rem;
				margin-top: 3px;
				border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
				border-radius: var(--sapButton_BorderCornerRadius);
				background: var(--sapButton_Lite_Background);
			}
		}

		&:active {

			.sapFSPSplitterBarDecorationBefore {
				flex-grow: 1;
				background-image: linear-gradient(to top, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
			}
			.sapFSPSplitterBarDecorationAfter {
				flex-grow: 1;
				background-image: linear-gradient(to bottom, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
			}
		}

		&:hover {

			.sapFSPSplitterBarDecorationBefore,
			.sapFSPSplitterBarDecorationAfter {
				flex-grow: 1;
				transition: all 0.1s ease-in;
			}

			.sapFSPSplitterBarGripIcon {
				background: var(--sapButton_Lite_Background);
				border-color: var(--sapButton_Lite_BorderColor);
			}
		}
	}

	/* Side panel */
	.sapFSPSide {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin: 0.5rem 0 0.5rem 1rem;
		min-width: 4.25rem;
		width: 4.25rem;
		min-height: 14rem;
		z-index: 1;

		.sapFSPSideInner {
			box-sizing: border-box;
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
			align-items: stretch;
			border-radius: var(--sapTile_BorderCornerRadius) 0 0 var(--sapTile_BorderCornerRadius);
			box-shadow: 0 0 1rem fade(@sapUiContentShadowColor, 10);
			background-color: var(--sapGroup_ContentBackground);
			min-width: 4.25rem;
			width: 100%;

			.sapFSPExpanded {
				width: 100%;
			}

			.sapFSPSideContent {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				width: auto;
				overflow: hidden;
				padding: 0.5rem 0 0.5rem 1rem;
				z-index: 1;

				.sapFSPSideContentHeader {
					height: 2.25rem;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					gap: 0.75rem;
					margin-right: 1rem;

					& > .sapUiIcon {
						color: var(--sapContent_IconColor);
					}

					.sapMTitle {
						flex-grow: 2;
						font-family: var(--sapFontBoldFamily);
						font-size: var(--sapFontHeader6Size);
						font-style: normal;
						font-weight: 700;
						color: var(--sapTextColor);

						& > span {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.sapFSPSideContentInner {
					display: flex;
					padding-right: 1rem;
					overflow: hidden auto;
				}
			}
		}

		.sapFSPActionBar {
			height: 100%;
			min-width: 4.25rem;
			width: 4.25rem;
			overflow: hidden;
		}

		.sapFSPActionBarList {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: start;
			margin-top: 4.25rem;
			margin-bottom: 0.5rem;
			gap: 2rem;

			.sapFSPItem {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: relative;
				height: 3.125rem;
				width: 100%;
				padding: 0.1875rem 0.75rem;
				gap: 0.75rem;
				cursor: pointer;

				.sapFSPItemText {
					font-family: var(--sapFontSemiboldDuplexFamily);
					font-size: var(--sapFontHeader6Size);
					font-style: normal;
					font-weight: 600;
					color: var(--sapTextColor);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.sapUiIcon {
					display: flex;
					flex-shrink: 0;
					align-items: center;
					justify-content: center;
					font-size: var(--sapFontHeader4Size);
					background-color: var(--sapGroup_ContentBackground);
					color: var(--sapContent_Selected_ForegroundColor);
					width: 2.75rem;
					height: 2.75rem;
					box-sizing: border-box;
					border-radius: 50%;
					border: 0.0625rem solid var(--sapContent_Selected_ForegroundColor);
					cursor: pointer;
				}

				&.sapFSPDisabled {
					opacity: var(--sapContent_DisabledOpacity);

					&:hover {
						background-color: initial;
					}
				}

				&.sapFSPOverflowItem {
					visibility: hidden;

					.sapUiIcon {
						color: var(--sapContent_Selected_ForegroundColor);
					}

					&:not(.sapFSPSelected):not(:hover) {

						.sapUiIcon {
							border: none;
						}
					}

					&.sapFSPSelected {

						&::before {
							display: none;
						}

						.sapUiIcon {
							border-color: var(--sapContent_Selected_ForegroundColor);
							background-color: var(--sapList_SelectionBackgroundColor);
							color: var(--sapContent_Selected_ForegroundColor);
						}
					}
				}

				&:focus {
					outline: none;

					&::after {
						content: '';
						position: absolute;
						box-sizing: border-box;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						border: 0.0625rem dotted var(--sapContent_FocusColor);
						pointer-events: none;
					}
				}

				&:hover {
					background-color: var(--sapList_Hover_Background);

					&.sapFSPOverflowItem .sapUiIcon {
						border-color: var(--sapContent_Selected_ForegroundColor);
					}
				}

				&.sapFSPSelected {

					&::before {
						position: absolute;
						left: 0;
						content: '';
						height: 3.125rem;
						width: 0.1875rem;
						background-color: var(--sapContent_Selected_ForegroundColor);
						border-radius: 0 0.1875rem 0.1875rem 0;
					}

					.sapUiIcon {
						border-color: var(--sapContent_Selected_ForegroundColor);
						background-color: var(--sapContent_Selected_ForegroundColor);
						color: var(--sapContent_ContrastIconColor);
					}

					&:focus::after {
						border-left-color: transparent;
					}
				}
			}
		}

		.sapFSPExpandCollapse {
			position: absolute;
			top: 0.25rem;
			right: 1rem;
		}
	}

	&.sapFSPActionBarExpanded {

		&:not(.sapFSPSideContentExpanded) .sapFSPSide {
			width: 20rem;
		}

		.sapFSPActionBar {
			max-width: 100%;
			width: 100%;
			flex-shrink: 0;

			.sapFSPActionBarList {
				flex-grow: 0;
				width: 100%;
			}
		}

		&.sapFSPSideContentExpanded {

			.sapFSPSide:not(.sapFSPSplitView) {

				.sapFSPSideContent {
					display: none;
				}

				.sapFSPActionBar {
					min-width: 100%;
					width: 100%;
					border-left-width: 0;
				}
			}
		}

	}

	&:not(.sapFSPSingleItem) .sapFSPSideContent {
		border-right: 0.0625rem solid var(--sapGroup_ContentBorderColor);
	}

	&.sapFSPSingleItem {

		&.sapFSPSideContentExpanded	{

			.sapFSPExpandCollapse,
			.sapFSPActionBar {
				display: none;
			}
		}

		.sapFSPExpanded {
			display: none;
		}
	}

	.sapFSPMinWidth,
	.sapFSPMaxWidth {
		position: absolute;
		top: 0;
		left: 0;
		height: 0;
		overflow: hidden;
	}
}

.sapFSP.sapFSPSingleItem.sapFSPSideContentExpanded .sapFSPSide .sapFSPActionBarList {
	width: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.sapFSPOverflowMenu .sapMMenuItem {
	.sapMMenuItemIcon {
		color: var(--sapContent_Selected_ForegroundColor);
	}

	.sapMMenuItemText {
		font-family: var(--sapFontFamily);
		font-size: var(--sapFontHeader6Size);
		font-style: normal;
		font-weight: 600;
	}

	&.sapMMenuItemDisabled {
		.sapMMenuItemText {
			opacity: var(--sapContent_DisabledOpacity);
		}
	}
}

/* Compact */
.sapUiSizeCompact {

	.sapFSP {

		.sapFSPSide {
			min-width: 4rem;
			width: 4rem;
			min-height: 13rem;

			.sapFSPSideInner {
				min-width: 4rem;
				width: 100%;

				.sapFSPActionBar {
					min-width: 4rem;
					width: 4rem;
				}
			}

			.sapFSPActionBarList {

				.sapFSPItem {
					height: 2.375rem;
					padding: 0.1875rem 1rem;

					&.sapFSPSelected::before {
						height: 2.375rem;
					}

					.sapUiIcon {
						font-size: var(--sapFontHeader5Size);
						width: 2rem;
						height: 2rem;
						line-height: 1.75rem;
					}
				}
			}

			div.sapFSPSideContent .sapFSPSideContentHeader {
				height: 2rem;
			}

			.sapFSPExpandCollapse {
				top: 0.5rem;
				right: 1rem;
			}
		}

		&.sapFSPActionBarExpanded {

			.sapFSPSideInner .sapFSPActionBar {
				width: 100%;
				max-width: 100%;
			}
		}
	}
}

.sapFSP.sapFSPLeft {
	flex-direction: row-reverse;

	.sapFSPSide {
		margin: 0.5rem 1rem 0.5rem 0;

		.sapFSPSideInner {
			border-radius: 0 var(--sapTile_BorderCornerRadius) var(--sapTile_BorderCornerRadius) 0;
			flex-direction: row;
		}

		.sapFSPExpandCollapse {
			right: auto;
			left: 1rem;
		}

		.sapFSPSplitterBar {
			left: initial;
			right: -1rem;
		}
	}
}

.sapFSP.sapFSPLeft:not(.sapFSPSingleItem) .sapFSPSideContent {
	border-right: none;
	border-left: 0.0625rem solid var(--sapGroup_ContentBorderColor);
}

/***** Phone *****/

html.sap-phone {

	/* Cozy */
	.sapFSP {
		flex-direction: column;

		.sapFSPExpandCollapse {
			display: none;
		}

		.sapFSPMain {
			overflow: hidden auto;
			margin-right: 0;
		}

		.sapFSPSide {
			position: inherit;
			border-radius: 0;
			margin: 0;
			flex-direction: column;
			width: 100%;
			height: 6.125rem;
			min-height: initial;
			overflow: hidden;
			flex: 0 0 4.125rem;

			.sapFSPSideInner {
				position: inherit;
				min-width: 100%;
				width: auto;
				overflow: hidden;
				border-radius: 0;
				border: none;
				border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);

				.sapFSPActionBar {
					position: relative;
					height: auto;
					min-width: 100%;
					width: 100%;
				}

				.sapFSPActionBarListWrapper {
					overflow: auto hidden;
					height: 6.125rem;
					box-sizing: border-box;
					flex-shrink: 0;
				}

				.sapFSPSideContent {
					border-radius: 0;
					border-width: 0;
					padding: 0;

					.sapFSPSideContentInner {
						padding: 0.1875rem 1rem;
						flex-wrap: wrap;
						width: auto;
					}

					.sapFSPSideContentHeader {
						text-align: center;
						height: 2.25rem;
						padding: 0.1875rem 1rem;
						border-bottom: 0.0625rem solid var(--sapGroup_ContentBorderColor);
						margin-right: 0;

						& > .sapUiIcon {
							width: 2.125rem;
							visibility: hidden;
						}
					}
				}

				.sapFSPActionBarList {
					display: flex;
					align-items: center;
					flex-direction: row;
					border-radius: 0;
					margin-top: 0;
					margin-bottom: 0;
					width: 100%;
					gap: 0;
					height: 6.125rem;

					&.sapFSPCenteredItems {
						justify-content: center;
					}

					.sapFSPItem {
						margin: 0;
						flex-direction: column;
						padding: 0.875rem 0.125rem 0 0.125rem;
						margin-left: 0;
						width: 25vw;
						min-width: 25vw;
						height: 6.125rem;
						gap: 0.4375rem;

						&:hover {
							background: none;
						}

						.sapUiIcon {
							width: 2.875rem;
							height: 2.375rem;
							border-radius: 4rem;
						}

						&.sapFSPSelected::before {
							left: 0;
							top: 0;
							width: 100%;
							height: 0.1875rem;
							border-radius: 0 0 0.1875rem 0.1875rem;
						}

						.sapFSPItemText {
							display: -webkit-box;
							-webkit-line-clamp: 2;
  							-webkit-box-orient: vertical;
							margin: 0;
							overflow: hidden;
							white-space: normal;
							text-overflow: ellipsis;
							text-align: center;
							width: 100%;
							font-weight: 700;
							font-size: 0.75rem;
							height: 1.875rem;
						}
					}
				}
			}
		}

		&.sapFSPSingleItem .sapFSPSideContentHeader {
			flex-direction: row-reverse;
			justify-content: center;
		}

		&.sapFSPActionBarExpanded {

			&.sapFSPSideContentExpanded .sapFSPSide:not(.sapFSPSplitView) .sapFSPSideContent {
				display: flex;
			}

			.sapFSPSide {
				flex: 0 0 6.125rem;
				max-width: initial;
				width: initial;

				.sapFSPSideInner .sapFSPSideContent {
					flex-grow: 1;
				}
			}
		}

		&.sapFSPSingleItem {

			.sapFSPSide {
				flex: 0 0 4.125rem;
				width: 100%;

				.sapFSPSideInner {
					justify-content: center;
					height: 100%;
					width: 100%;

					.sapFSPActionBarListWrapper {
						height: inherit;
						width: 100%;
						display: flex;
						border: none;

						.sapFSPActionBarList {
							height: inherit;

							.sapFSPItem {
								flex-direction: row;
								width: 100%;
								max-width: 100%;
								height: inherit;
								padding: 0.875rem 1rem;
								align-items: center;
								justify-content: center;
								gap: 0.75rem;

								.sapUiIcon {
									border-width: 0;
									width: 2.25rem;
								}

								.sapFSPItemText {
									display: inline;
									font-size: 0.875rem;
									height: 1rem;
									white-space: nowrap;
									width: auto;
								}

								&.sapFSPSelected::before {
									display: none;
								}
							}
						}
					}

					.sapFSPSideContent .sapFSPSideContentHeader {
						flex-direction: row-reverse;
						justify-content: center;

						> .sapUiIcon {
							display: none;
						}

						.sapMTitle {
							flex-grow: 0;
						}
					}
				}
			}

			&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
				height: 0;
				overflow: hidden;
				border: none;
			}
		}

		&.sapFSPSideContentExpanded .sapFSPSide {
			flex: 0 0 100%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: var(--sapBackgroundColor);
			height: 100%;

			.sapFSPSideInner {
				display: flex;
				flex-direction: column-reverse;
				flex-wrap: nowrap;
				align-items: stretch;
				width: 100%;
				border: none;

				.sapFSPActionBarListWrapper {
					border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);
				}
			}
		}

		&:not(.sapFSPActionBarExpanded):not(.sapFSPSingleItem) .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
			height: 4.125rem;
			width: 100%;
		}
	}

	/* Compact */
	.sapUiSizeCompact {

		.sapFSP {

			.sapFSPSide {
				flex: 0 0 3.75rem;

				.sapFSPSideInner {

					.sapFSPActionBarListWrapper {
						height: 5.5rem;
					}

					.sapFSPSideContent .sapFSPSideContentHeader {
						padding: 0.5rem 1rem;
						height: 1.625rem;
					}

					.sapFSPActionBarList {
						height: 5.5rem;

						.sapFSPItem {
							height: 5.5rem;
							padding-top: 0.875rem;

							.sapUiIcon {
								width: 2.75rem;
								height: 2rem;
								border-radius: 4rem;
							}

							.sapFSPItemText {
								height: 1.75rem;
							}
						}
					}
				}
			}

			&.sapFSPActionBarExpanded .sapFSPSide {
				flex: 0 0 5.5rem;
			}

			&.sapFSPSideContentExpanded .sapFSPSide {
				height: 100%;

				.sapFSPSideInner {

					.sapFSPSideContentInner {
						padding: 0.5rem 1rem;
					}

					.sapFSPSideContentHeader {

						& > .sapUiIcon {
							width: 2rem;
						}
					}
				}
			}

			&:not(.sapFSPActionBarExpanded) .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
				height: 3.75rem;
			}

			&.sapFSPSingleItem {

				.sapFSPSide {

					.sapFSPSideInner {

						.sapFSPActionBarListWrapper .sapFSPActionBarList .sapFSPItem .sapUiIcon {
							width: 2rem;
						}

						.sapFSPSideContent .sapFSPSideContentHeader > .sapUiIcon {
							display: none;
						}
					}
				}

				&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
					height: 0;
					overflow: hidden;
				}
			}
		}
	}
}