
@mixin switch-variant($color) {

	.switch.switch-#{'' + $color} {

		> input[type="checkbox"] {
		
			&:checked + label {
	
				border-color: get-color($color, 200);
	
				> .button {
	
					background: get-color($color, 500);
					border-color: get-color($color, 600);
	
				}
	
			}
	
		}

	}

}


.switch {

	position: relative;
	width: 34px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select: none;
	margin-bottom: 32px;

	> input[type="checkbox"] {

		display: none;

		&:checked + label {

			border-color: get-color(teal, 200);

			> .button {

				background: get-color(teal, 500);
				border: 1px solid get-color(teal, 600);
				right: 8px;
				box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.3);

			}

			> .rail {

				margin-left: 0;

			}

		}

		&:focus + label {

			> .focus {
				opacity: 1;
			}

		}

		&:disabled {

			+ label {

				border-color: get-color(grey, 300) !important;

				> .button {

					background: get-color(grey, 400) !important;
					border-color: get-color(grey, 400) !important;
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

				}

				&:hover {

					cursor: not-allowed;

				}

			}

		}

	}

	> label {

		display: block;
		overflow: hidden;
		cursor: pointer;
		border: 7px solid get-color(grey, 500);
		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
		border-radius: 50px;
		min-height: 0;

		-moz-transition: all .28s cubic-bezier(0.4,0,.2,1);
		-webkit-transition: all .28s cubic-bezier(0.4,0,.2,1);
		-o-transition: all .28s cubic-bezier(0.4,0,.2,1);
		transition: all .28s cubic-bezier(0.4,0,.2,1);

		.focus,
		:hover {

			opacity: 0;
			background-color: rgba(0,0,0,0.1);
			width: 48px;
			height: 48px;
			display: block;
			position: absolute;
			top: -16px;
			left: 2px;
			z-index: 10;
			border-radius: 50%;

		}

		.button {

			background: get-color(grey, 100);
			border: 1px solid get-color(grey, 300);
			display: block;
			width: 20px;
			height: 20px;
			margin: -10px;
			border-radius: 50%;
			position: absolute;
			top: 7px;
			bottom: 0;
			right: 24px;
			-moz-transition: all .28s cubic-bezier(0.4,0,.2,1);
			-webkit-transition: all .28s cubic-bezier(0.4,0,.2,1);
			-o-transition: all .28s cubic-bezier(0.4,0,.2,1);
			transition: all .28s cubic-bezier(0.4,0,.2,1);
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

		}

		.rail {

			display: block;
			width: 200%;
			margin-left: -100%;
			-moz-transition: margin .28s cubic-bezier(0.4,0,.2,1);
			-webkit-transition: margin .28s cubic-bezier(0.4,0,.2,1);
			-o-transition: margin .28s cubic-bezier(0.4,0,.2,1);
			transition: margin .28s cubic-bezier(0.4,0,.2,1);

			&:before,
			&:after {

				display: block;
				float: left;
				width: 50%;
				height: 30px;
				padding: 0;
				line-height: 30px;
				font-size: 14px;
				color: white;
				font-weight: bold;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;

			}

			&:before {

				padding-left: 10px;
				background-color: #34A7C1;
				color: #FFFFFF;

			}
			
			&:after {

				padding-right: 10px;
				background-color: #EEEEEE;
				color: #999999;
				text-align: right;

			}

		}

	}

}


@each $color in map-keys(map-get($color-map, colors)) {

	@include switch-variant($color);

}
