$toggleActiveColor: $limeGreen;
$containerWidth: 42px;
$containerHeight: 26px;
$containerRadius: 15px;
$containerShadowActive: 0 2px 2px #222 inset;
$containerShadowInactive: 0 2px 2px #111 inset;
$backgroundColorInactive: #222;
$backgroundColorActive: darken($toggleActiveColor, 30%);
$thumbColorActive: $toggleActiveColor;
$thumbColorInactive: #777;
$thumbWidth: 18px;
$thumbHeight: $thumbWidth;
$borderSize: 1px;
$animationSpeed: 0.2s;

.toggle {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;

	input {
		display: none;

		&:checked + label {
			background: darken($thumbColorActive, 30%);
			border: $borderSize solid rgba($white, .1);
			box-shadow: $containerShadowActive;

			&::after {
				content: "";
				display: block;
				border-radius: 50%;
				margin-left: calc($containerWidth - 21px);
			    width: $thumbWidth;
			    height: $thumbHeight;
				transition: $animationSpeed;
				background: $thumbColorActive;
				box-shadow: 0 2px darken($thumbColorActive, 40%);
			}
		}
	}

	label {
		width: $containerWidth + ($borderSize * 2);
		height: $containerHeight;
		border-radius: $containerRadius;
		background: $backgroundColorInactive;
		cursor: pointer;
		border: $borderSize solid rgba($white, .1);
		box-shadow: $containerShadowInactive;

		&::after {
			content: "";
			display: block;
			border-radius: 50%;
			width: $thumbWidth;
			height: $thumbHeight;
			margin: 3px;
			background: $thumbColorInactive;
			box-shadow: 0 2px rgba(0,0,0,0.9);
			transition: $animationSpeed;
		}
	}
}