//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

.Vlt-switch {
	height: 30px;
	position: relative;
	width: 50px;

	&__slider {
		background-color: $grey-dark;
		border-radius: 30px;
		cursor: pointer;
		height: 100%;
		left: 0px;
		position: absolute;
		top: 0px;
		transition: 0.4s;
		width: 100%;

		&:before {
			background-color: transparent;
			border: 0;
			border-radius: 30px;
			box-shadow: 0 0 0 0 rgba($deep-black, 0.1);
			content: '';
			height: 30px;
			left: 0;
			position: absolute;
			top: 0;
			transition: 0.4s;
			width: 50px;
		}

		&:after {
			background-color: $white;
			border-radius: 30px;
			content: '';
			height: 24px;
			left: 3px;
			position: absolute;
			top: 3px;
			transition: 0.4s;
			width: 24px;
		}

		&:hover {
			background-color: $grey-darker;

			&:after {
				background-color: $grey-lighter;
			}
		}

		&:active {
			background-color: $grey-light;

			&:after {
				background-color: $grey-darker;
			}
		}
	}

	input {
		-webkit-tap-highlight-color: transparent;
		appearance: none;
		height: 0px;
		left: 10px;
		overflow: hidden;
		position: absolute;
		top: 10px;
		width: 0px;

		&:disabled {
			~ .Vlt-switch__slider {
				background-color: rgba($grey-dark, 0.5);

				&:hover,
				&:active {
					background-color: rgba($grey-dark, 0.5);
					cursor: auto;

					&:after {
						background-color: $white;
					}
				}
			}
		}

		&:focus {
			-webkit-tap-highlight-color: transparent;
			outline: none;

			~ .Vlt-switch__slider {
				&:before {
					box-shadow: 0 0 0 5px rgba($deep-black, 0.1);
				}
			}

			&:checked ~ .Vlt-switch__slider {
				&:before {
					box-shadow: 0 0 0 5px rgba($green, 0.3);
				}
			}
		}

		&:checked ~ .Vlt-switch__slider {
			background-color: $green;

			&:after {
				left: 22px;
			}

			&:hover {
				background-color: $green-dark;

				&:after {
					background-color: $green-lighter;
				}
			}

			&:active {
				background-color: $green-lighter;

				&:after {
					background-color: $green;
				}
			}
		}
	}

	&.Vlt-switch--red {
		input {
			&:focus {
				&:checked ~ .Vlt-switch__slider {
					&:before {
						box-shadow: 0 0 0 5px rgba($red, 0.3);
					}
				}
			}

			&:checked ~ .Vlt-switch__slider {
				background-color: $red;

				&:hover {
					background-color: $red-dark;

					&:after {
						background-color: $red-lighter;
					}
				}

				&:active {
					background-color: $red-light;

					&:after {
						background-color: $red-dark;
					}
				}
			}
		}
	}

	&.Vlt-switch--primary {
		input {
			&:focus {
				&:checked ~ .Vlt-switch__slider {
					&:before {
						box-shadow: 0 0 0 5px rgba($purple-dark, 0.3);
					}
				}
			}

			&:checked ~ .Vlt-switch__slider {
				background-color: $purple-dark;

				&:hover {
					background-color: $purple-darker;

					&:after {
						background-color: $purple-lighter;
					}
				}

				&:active {
					background-color: $purple-light;

					&:after {
						background-color: $purple-dark;
					}
				}
			}
		}
	}

	&.Vlt-switch--secondary {
		input {
			&:focus {
				&:checked ~ .Vlt-switch__slider {
					&:before {
						box-shadow: 0 0 0 5px rgba($black, 0.3);
					}
				}
			}

			&:checked ~ .Vlt-switch__slider {
				background-color: $black;

				&:hover {
					background-color: $grey-darker;

					&:after {
						background-color: $grey-lighter;
					}
				}

				&:active {
					background-color: $grey-light;

					&:after {
						background-color: $grey-darker;
					}
				}
			}
		}
	}

	&.Vlt-switch--orange {
		input {
			&:focus {
				&:checked ~ .Vlt-switch__slider {
					&:before {
						box-shadow: 0 0 0 5px rgba($orange, 0.3);
					}
				}
			}

			&:checked ~ .Vlt-switch__slider {
				background-color: $orange;

				&:hover {
					background-color: $orange-dark;

					&:after {
						background-color: $orange-lighter;
					}
				}

				&:active {
					background-color: $orange-light;

					&:after {
						background-color: $orange-dark;
					}
				}
			}
		}
	}

	&.Vlt-switch--indigo {
		input {
			&:focus {
				&:checked ~ .Vlt-switch__slider {
					&:before {
						box-shadow: 0 0 0 5px rgba($indigo, 0.3);
					}
				}
			}

			&:checked ~ .Vlt-switch__slider {
				background-color: $indigo;

				&:hover {
					background-color: $indigo-dark;

					&:after {
						background-color: $indigo-lighter;
					}
				}

				&:active {
					background-color: $indigo-light;

					&:after {
						background-color: $indigo-dark;
					}
				}
			}
		}
	}

	&.Vlt-switch--blue {
		input {
			&:focus {
				&:checked ~ .Vlt-switch__slider {
					&:before {
						box-shadow: 0 0 0 5px rgba(28, 143, 218, 0.3);
					}
				}
			}

			&:checked ~ .Vlt-switch__slider {
				background-color: #1c8fda;

				&:hover {
					background-color: #0070b9;

					&:after {
						background-color: #d9eefc;
					}
				}

				&:active {
					background-color: #d9eefc;

					&:after {
						background-color: #0070b9;
					}
				}
			}
		}
	}

	&--small {
		height: 20px;
		position: relative;
		width: 32px;

		.Vlt-switch__slider {
			&:before {
				height: 20px;
				left: 0;
				top: 0;
				width: 32px;
			}

			&:after {
				height: 16px;
				left: 2px;
				top: 2px;
				width: 16px;
			}
		}

		input:checked ~ .Vlt-switch__slider {
			&:after {
				left: 13px;
			}
		}
	}
}