/** Grasp the reference :) */

.the-switcher {
	display: flex;
	align-items: center;
	margin: 0 0.5rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	& i {
		position: relative;
		display: inline-block;
		margin-right: 0.5rem;
		width: 46px;
		height: 26px;
		background-color: #444444;
		border-radius: 23px;
		vertical-align: text-bottom;
		transition: all 0.3s linear;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			width: 42px;
			height: 22px;
			border-radius: 11px;
			transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
			transition: all 0.25s linear;
		}

		&::after {
			content: "";
			position: absolute;
			left: 0;
			width: 22px;
			height: 22px;
			background-color: #fff;
			border-radius: 11px;
			box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
			transform: translate3d(2px, 2px, 0);
			transition: all 0.2s ease-in-out;
		}
	}

	& input {
		&:checked {
			& + i {
				background-color: #4bd763;

				&::before {
					transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
				}

				&::after {
					transform: translate3d(22px, 2px, 0);
				}
			}
		}

		&[disabled] {
			& + i {
				background-color: grey;
			}
		}
	}

	&:active {
		/**
		 * Enable this instruction to apply an enlargment of
		 * the toggle on animation (iOS 10, if I remember correctly).
		 * Also decrease tx value below
		 */

		/*& i::after {
 			width: 28px;
			transform: translate3d(2px, 2px, 0);
		}*/

		& input:checked {
			& + i::after {
				// Decreasing value tx (22px) applies a traction effect
				transform: translate3d(22px, 2px, 0);
			}
		}
	}
}
