@use "sass:math";
/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}switch {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */

	display: flex;

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
		@keyframes shimmer {
			100% {
				transform: translateX(100%);
			}
		}
	}


	/* children - write selector in full in comments in order to facilitate search */

	// switch__input
	&__input {

		&:checked ~ #{$self}__shape {

			position: relative;
			@include custom-prop-fallback("background-color", "comp-switch-checked-background-color");
			@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

			&::after {
				transform: translateX($custom-switch-width - $custom-control-indicator-size*2 + $custom-control-indicator-border-width * 2);
				@include custom-prop-fallback-box-shadow-color(0, $border-width*2, $border-width*4, 0 ,"comp-switch-checked-knob-shadow-color")
			}

			#{$self}__textActive {

				transform: translateX(0);
				opacity: 1;
				visibility: visible;

			}

			#{$self}__textInactive {

				transform: translateX(100%);
				//opacity: 0;
				//visibility: hidden;

			}

		}

		&:disabled {

			~ #{$self}__shape {

				cursor: not-allowed;
				pointer-events: none;
				@include custom-prop-fallback("background-color", "comp-switch-disabled-background-color");
				@include custom-prop-fallback("color", "sys-color-text-neutral-vivid");

				&::after {

					@include custom-prop-fallback("background-color", "comp-switch-disabled-knob-background-color");

				}

			}

			&:checked ~ #{$self}__shape {

				@include custom-prop-fallback("background-color", "comp-switch-checked-disabled-background-color");
				@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

				&::after {

					@include custom-prop-fallback("background-color", "comp-switch-checked-disabled-knob-background-color");

				}

			}

		}

	}

	// switch__shape
	&__shape {

		// follows same logic as parent
		width: $custom-switch-width;
		height: map-deep-get($token-button-size-big-map, "mobile", "min-height");
		min-height: 0;
		@include custom-prop-fallback("background-color", "comp-switch-background-color");
		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
		border-radius: $custom-switch-indicator-border-radius;
		@extend %textHelper;
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
		overflow: hidden;
		cursor: pointer;
		flex-shrink: 0;

		&::after {

			content: "";
			position: absolute;
			z-index: z("low");
			top: $custom-control-indicator-border-width;
			left: $custom-control-indicator-border-width;
			width: $custom-switch-indicator-size;
			height: $custom-switch-indicator-size;
			@include custom-prop-fallback("background-color", "comp-switch-knob-background-color");
			// stylelint-disable-next-line property-disallowed-list
			border-radius: $custom-switch-indicator-border-radius;
			@include transition(transform .15s ease-in-out, $custom-forms-transition);
			@include custom-prop-fallback-box-shadow-color(0, $border-width*2, $border-width*4, 0 ,"comp-switch-knob-shadow-color")

		}

	}

	&__text {

		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transition: transform 0.15s linear;

	}

	&__textActive {

		padding-right: $custom-switch-indicator-size;
		transform: translateX(-100%);

	}

	&__textInactive {

		padding-left: $custom-switch-indicator-size;

	}

	/* modifiers */

	// switch -loading
	&.-loading {

		// follows same logic as base element

		#{$self}__shape {

			-webkit-transform: translateZ(0);
			cursor: not-allowed;

			&::before {
				content: '';
				@include btn-loading-state(map-deep-get($token-sizes-unit-map, "8"), inherit, 1.35s);
				@include custom-prop-fallback("background-color", "sys-color-background-neutral-100");
				z-index: z("zero");
			}

			&::after {

				transform: translateX($custom-switch-width*0.5 - ($custom-control-indicator-size*0.75));

			}

		}

		#{$self}__input {

			&:checked ~ #{$self}__shape {

				&::before {

					@include custom-prop-fallback("background-color", "sys-color-background-status-success-90");

				}

			}

		}

		#{$self}__textActive {

			transform: translateX(-100%);

		}

		#{$self}__textInactive {

			transform: translateX(100%);

		}

		#{$self}__input:checked ~ #{$self}__shape {

			#{$self}__textActive {

				transform: translateX(-100%);

			}

			#{$self}__textInactive {

				transform: translateX(100%);

			}

		}

	}

	&.-small {

		display: inline-flex;
		align-items: center;

		#{$self}__input:checked ~ #{$self}__shape {

			&::after {
				transform: translateX($custom-switch-width-small - $custom-switch-indicator-size-small*2 + $custom-control-indicator-border-width*3);
			}

		}

		#{$self}__shape {


			width: $custom-switch-width-small;
			height: $custom-switch-height-small;

			&::after {

				top: $border-width*2;
				left: $border-width*2;
				width: $custom-switch-indicator-size-small;
				height: $custom-switch-indicator-size-small;

			}

		}

		#{$self}__outsideLabel {

			@include custom-prop-fallback("color", "sys-color-text-primary-muted");
			font-weight: map-deep-get($token-font-weight-map, "bold");
			@extend %textHelperSmall;
			margin-right: map-deep-get($token-spacer-unit-map, "8");
			cursor: pointer;

		}

		&.-loading {

			#{$self}__input:checked ~ #{$self}__shape,
			#{$self}__shape {

				&::after {

					transform: translateX($custom-switch-width-small*0.5 - ($custom-switch-indicator-size-small*0.5) - $border-width);

				}

			}

		}

	}


	/* random parent element */
	/*
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}