/* =========================================== */
/* CSS for control sap.f/FlexibleColumnLayout  */
/* Evening Horizon theme                       */
/* =========================================== */

@_sap_f_FCL_SeparatorButtonColor: var(--sapButton_Lite_TextColor);

.sapFFCL {

	&.sapFFCLBackgroundDesignSolid {
		background: var(--sapContent_ForegroundColor);
	}

	&.sapFFCLBackgroundDesignTranslucent {
		background: var(--sapGroup_ContentBackground);
	}

	&.sapFFCLBackgroundDesignTransparent {
		background: transparent;
	}

	& > .sapFFCLColumnMid.sapFFCLColumnActive {
		border-left: 0.0625rem solid var(--sapGroup_ContentBorderColor);
		border-right: 0.0625rem solid var(--sapGroup_ContentBorderColor);
	}

	& > .sapFFCLColumnActive.sapFFCLColumnLastActive {
		border-right: none;
		border-left: 0.0625rem solid var(--sapGroup_ContentBorderColor);
	}

	& > .sapFFCLColumnActive.sapFFCLColumnFirstActive {
		border-right: 0.0625rem solid var(--sapGroup_ContentBorderColor);
		border-left: none;
	}

	& > .sapFFCLColumnActive.sapFFCLColumnOnlyActive {
		border-right: none;
		border-left: none;
	}
}

.sapFFCLNavigationButton,
.sapUiSizeCompact .sapFFCLNavigationButton {

	/* Reflection: styles overwritten */
	.sapMBtnInner {
		height: 1.625rem;
	}

	&::before {
		background-image: linear-gradient(to top, var(--sapGroup_ContentBorderColor), transparent);
	}

	&::after {
		background-image: linear-gradient(to bottom, var(--sapGroup_ContentBorderColor), transparent);
	}
}