/* ====================================================== */
/* CSS for control sap.ui.integration.controls/Paginator */
/* Base theme                                             */
/* ====================================================== */

@_sap_ui_integration_Paginator_IconOutlineOffset: -3px;
@_sap_ui_integration_Paginator_BulletActiveBackground: @sapUiSelected;
@_sap_ui_integration_Paginator_BulletActiveBorder: @_sap_ui_integration_Paginator_BulletActiveBackground;

@_sap_ui_integration_Paginator_BulletInactiveBackground: @sapUiContentNonInteractiveIconColor;
@_sap_ui_integration_Paginator_BulletInactiveBorderColor: @sapUiContentNonInteractiveIconColor;
@_sap_ui_integration_Paginator_BulletInactiveHoverBackground: none;

@_sap_ui_integration_Paginator_BulletInactiveWidth: 0.25rem;
@_sap_ui_integration_Paginator_BulletInactivePadding: 0.375rem;

.sapUiIntPaginator {
	.sapMCrslControls {
		.sapMCrslControlsContainer {
			margin: 0;
		}

		.sapMCrslPrev,
		.sapMCrslNext {
			background: none;
			border: none;
			transition: opacity 0.25s ease-out;
		}

		.sapUiIcon {
			pointer-events: auto;
			border-radius: 50%;
			background-color: @sapUiButtonBackground;
			border: 1px solid @sapUiButtonBorderColor;

			outline-offset: @_sap_ui_integration_Paginator_IconOutlineOffset;

			&:focus {
				outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
			}
		}

		.sapUiIcon:hover {
			background: @sapUiButtonHoverBackground;
		}

		.sapUiIcon:active {
			background: @sapUiButtonActiveBackground;
			color: @sapUiButtonActiveTextColor;
		}

		.sap-desktop & {
			.sapMCrslPrev,
			.sapMCrslNext {
				opacity: 0;
			}
		}

		.sap-desktop &:hover,
		.sap-desktop &:focus-within {
			.sapMCrslPrev,
			.sapMCrslNext {
				opacity: 1;
			}
		}

		.sapMCrslBulleted > span {
			transition: margin 0.2s, padding 0.2s, width 0.2s, height 0.2s;
			content: "";
			box-sizing: border-box;
			display: block;
			width: @_sap_ui_integration_Paginator_BulletInactiveWidth;
			height: @_sap_ui_integration_Paginator_BulletInactiveWidth;
			border-radius: 50%;
			background-color: @_sap_ui_integration_Paginator_BulletInactiveBackground;
			border: 1px solid @_sap_ui_integration_Paginator_BulletInactiveBorderColor;

			&.sapMCrslActive {
				padding: 0.1875rem;
				width: 0.5rem;
				height: 0.5rem;
				background-color: @_sap_ui_integration_Paginator_BulletActiveBackground;
				border: 1px solid @_sap_ui_integration_Paginator_BulletActiveBorder;
			}

			&:not(.sapMCrslActive) {
				cursor: pointer;

				&:hover {
					padding: 0.1875rem;
					margin: 0 0.25rem;
					background-color: @_sap_ui_integration_Paginator_BulletInactiveHoverBackground;
					width: 0.5rem;
					height: 0.5rem;
				}
			}
		}
	}
}

.sapUiIntCard  {
	.sapFCardContentCloned {
		position: absolute;
		left: 0;
		right: 0;
	}

	.sapFCardContentTransition {
		transition: transform 0.4s linear;
	}

	.sapFCardContentOriginal,
	.sapFCardContentCloned.sapFCardContentTransition.sapFCardContentReverseAnim {
		transform: translate(0, 100%);
	}

	.sapFCardContentOriginal.sapFCardContentReverseAnim,
	.sapFCardContentCloned.sapFCardContentTransition {
		transform: translate(0, -100%);
	}

	.sapFCardContentOriginal.sapFCardContentTransition {
		transform: translate(0, 0);
	}
}