:root {
	--toogleHeight: var(--ems_0_5);
	--toogleMargin: calc(var(--ems) * 0.02);
	--toggleRadius: calc(var(--toogleHeight) - var(--toogleMargin));
}

.toggle-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Hide the checkbox input */
.toggle-checkbox {
	display: none;
	/*pointer-events: none;*/
}

.toggle-label {
	width: calc(var(--toogleHeight) * 2);
	height: var(--toogleHeight);
	background-color: #494949;
	display: inline-block;
	border-radius: var(--ems_0_5); /* Replaced with --ems_0_5 if applicable */
	position: relative;

	margin-left: calc(var(--px) * 1);

	transition: background-color 0.2s ease;
	/*pointer-events: none;*/
}

.toggle-button {
	width: var(--toggleRadius);
	height: var(--toggleRadius);
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	transition: transform 0.2s ease;
	box-shadow: 0 calc(var(--ems) * 0.02) calc(var(--ems) * 0.04) rgba(0, 0, 0, 0.2); /* 0 2px 4px */
	border-width: var(--toogleMargin);
	border-color: black;
	border-style: solid;
	/*pointer-events: none;*/
}

/* Checked state styles */
.toggle-checkbox:checked + .toggle-label {
	background-color: #ccc;
}

/* Move the button when checkbox is checked */
.toggle-checkbox:checked + .toggle-label .toggle-button {
	transform: translateX(calc(var(--toogleHeight))) translateY(-50%);
}

/* Optional: Add a shadow effect for a more 3D feel */
.toggle-label:hover .toggle-button {
	box-shadow: 0 calc(var(--ems) * 0.04) calc(var(--ems) * 0.06) rgba(0, 0, 0, 0.3); /* 0 4px 6px */
}

/* Optional: Add a focus effect */
.toggle-checkbox:focus + .toggle-label {
	outline: calc(var(--ems) * 0.02) solid #4caf50; /* 2px */
}