/* ============================= */
/* CSS for control sap.m/Switch  */
/* Fiori 3 theme                 */
/* ============================= */

@_sap_m_Switch_OffBackground: lighten(@sapUiButtonBackground, 3);
@_sap_m_Switch_OffBorderColor: var(--sapButton_BorderColor);

/* Switch container */
.sapMSwtCont {
	overflow: hidden;
	/* in order to have a touchable area of 2.75rem */
	padding-top: 0.6875rem;
	padding-bottom: 0.6875rem;
	padding-left: 0.125rem;
	width: 4.125rem;
}

/* focus */
html.sap-desktop {

	.sapMSwtCont:focus > .sapMSwt::before {
		content: ' ';
		position: absolute;
		display: block;
		top: -0.375rem;
		left: -0.125rem;
		bottom: -0.375rem;
		right: -0.125rem;
		outline: 1px dotted var(--sapContent_FocusColor);
	}

	.sapUiSizeCompact {

		.sapMSwtCont:focus > .sapMSwt:not(.sapMSwtNoLabel)::before {
			top: -0.25rem;
			bottom: -0.25rem;
		}

		.sapMSwtCont:focus > .sapMSwt.sapMSwtNoLabel::before {
			top: -0.375rem;
			bottom: -0.375rem;
		}
	}
}

/* Switch */
.sapMSwt {
	box-sizing: border-box;
	width: 3.875rem;
	height: 1.375rem;
	overflow: visible;
	border: var(--sapButton_BorderWidth) solid;
	border-top-left-radius: 0.75rem;
	border-top-right-radius: 0.75rem;
	border-bottom-right-radius: 0.75rem;
	border-bottom-left-radius: 0.75rem;

	&.sapMSwtNoLabel {
		width: 3.25rem;
		height: 1.25rem;
		outline-offset: -8px; /* ON state handle movement limit correction in pixels for no-label switches, because of reduced width */

		&.sapMSwtOn .sapMSwtInner {
			left: -0.5rem;
		}
	}
}

/* background */

.sapMSwtOff:not(.sapMSwtAcceptReject) {
	background: @_sap_m_Switch_OffBackground;
	border-color: var(--sapContent_ForegroundBorderColor);
}

.sapMSwt.sapMSwtOff.sapMSwtHoverable:not(.sapMSwtAcceptReject):hover {
	border-color: var(--sapContent_ForegroundBorderColor);
}

/* disabled */

.sapMSwtDisabled {
	opacity: var(--sapContent_DisabledOpacity);
}

/* Text */
.sapMSwtText {
	line-height: 1.25rem;
	width: 1.75rem;

	&.sapMSwtTextOn {
		margin: 0 0 0 0.125rem;
		color: var(--sapButton_Track_Selected_TextColor);
	}

	&.sapMSwtTextOff {
		margin: 0 0.125rem 0 0;
		color: var(--sapButton_Track_TextColor);
		left: 3.8rem;
	}

	.sapMSwtLabel {
		height: 1.25rem;
		padding: 0;
	}
}

/* Switch handler */
.sapMSwtOn .sapMSwtHandle,
.sapMSwtOff .sapMSwtHandle {
	height: 1.875rem;
	width: 1.875rem;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	border-bottom-left-radius: 1rem;
	border: var(--sapButton_BorderWidth) solid;
	left: 1.9375rem;
}

/* on */
.sapMSwt.sapMSwtOn:not(.sapMSwtAcceptReject) {
	background: var(--sapButton_Track_Selected_Background);
	border-color: var(--sapButton_Selected_BorderColor);

	.sapMSwtHandle {
		box-sizing: border-box;
		background: var(--sapButton_Selected_Background);
		border-color: var(--sapButton_Selected_BorderColor);
	}

	&.sapMSwtHoverable:not(.sapMSwtAcceptReject):hover {
		background: var(--sapButton_Track_Selected_Background);
		border-color: var(--sapButton_Selected_Hover_BorderColor);

		.sapMSwtHandle {
			background: var(--sapButton_Selected_Hover_Background);
			border-color: var(--sapButton_Selected_Hover_BorderColor);
		}
	}
}

/* off */
.sapMSwt.sapMSwtOff:not(.sapMSwtAcceptReject) {
	background: var(--sapButton_Track_Background);
	border-color: var(--sapContent_ForegroundBorderColor);

	.sapMSwtHandle {
		background: var(--sapButton_Background);
		border-color: var(--sapContent_ForegroundBorderColor);
	}

	&.sapMSwtHoverable:not(.sapMSwtAcceptReject):hover {
		border-color: var(--sapButton_Hover_BorderColor);

		.sapMSwtHandle {
			background: var(--sapButton_Hover_Background);
			border-color: var(--sapButton_Hover_BorderColor);
		}
	}
}

/* Switch type "AcceptReject" */

/* Switch */
.sapMSwtAcceptReject.sapMSwt {
	background: @_sap_m_Switch_OffBackground;

	/* on */
	&.sapMSwtOn {
		background: var(--sapSuccessBackground);
		border-color: var(--sapSuccessBorderColor);

		.sapMSwtHandle {
			background: var(--sapButton_Background);
			border-color: var(--sapSuccessBorderColor);
		}

		&.sapMSwtHoverable:hover {

			.sapMSwtHandle {
				background: var(--sapSuccessBackground);
			}
		}
	}

	/* off */
	&.sapMSwtOff {
		background: var(--sapErrorBackground);
		border-color: var(--sapErrorBorderColor);

		.sapMSwtHandle {
			background: var(--sapButton_Background);
			border-color: var(--sapErrorBorderColor);
		}

		&.sapMSwtHoverable:hover {

			.sapMSwtHandle {
				background: var(--sapErrorBackground);
			}
		}
	}
}

/* Switch handler */
.sapMSwt.sapMSwtAcceptReject.sapMSwtOff.sapMSwtHoverable:hover {
	background: var(--sapErrorBackground);
}

.sapMSwt.sapMSwtAcceptReject.sapMSwtOn.sapMSwtHoverable:hover {
	background: var(--sapSuccessBackground);
}

.sapMSwt.sapMSwtAcceptReject.sapMSwtOn .sapMSwtLabel {
	color: var(--sapPositiveElementColor);
	font-size: 0.75rem;
}

.sapMSwt.sapMSwtAcceptReject.sapMSwtOff .sapMSwtLabel {
	color: var(--sapNegativeElementColor);
	font-size: 0.75rem;
}

/* Compact mode */
.sapUiSizeCompact {

	.sapMSwtCont {
		width: 3.75rem;
		/* in order to have a touchable area of 2rem */
		padding-top: 0.3125rem;
		padding-bottom: 0.3125rem;

		.sapMSwt {
			width: 3.5rem;
			height: 1.375rem;

			&.sapMSwtNoLabel {
				width: 2.5rem;
				height: 1rem;
				margin-top: 0.0625rem;
				margin-bottom: 0.0625rem;
				outline-offset: -14px; /* ON state handle movement limit correction in pixels for no-label switches, because of reduced width */

				&.sapMSwtOn .sapMSwtInner {
					left: -0.88rem;
				}
			}

			.sapMSwtHandle {
				height: 1.625rem;
				width: 1.625rem;
				left: 1.88rem;
			}

			.sapMSwtText {
				line-height: 1.25rem;

				&.sapMSwtTextOff {
					left: 3.5rem;
				}

				.sapMSwtLabel {
					width: 1.75rem;
				}
			}

			&.sapMSwtOn .sapMSwtText.sapMSwtTextOff {
				left: 3.75rem;
			}

			&.sapMSwtOff .sapMSwtText.sapMSwtTextOn {
				left: -0.125rem;
			}
		}
	}
}