// Colors
$color-red: #d33;
$color-blue: #3091f2;
$color-orange: #f60;
$color-green: #0c6;

// Sizes
$md: 48px;
$lg: 60px;

.vue-switch { // default is md - classes below for sm, lg, xl
	position: relative;
	display: inline-block;
	width: 48px;
	height: 20px;
	line-height: 20px;
	border-radius: 20px;
	border: 1px solid #d5d5d5;
	background-color: #d5d5d5;
	cursor: pointer;
	transition: all 0.25s ease;
	user-select: none;
	overflow: hidden;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	transform: rotate(0deg);

	span {
		position: absolute;
		font-size: 12px;
		left: 25px;
		color: #222;

		&.switch-on {
			display: none;
		}

		&.switch-off {
			display: inline;
		}
	}

	svg.locked {
		position: relative;
		top: 2px;
		left: 5px;
		width: 16px;
		height: 16px;
		fill: white;
	}

	&::after {
		position: absolute;
		content: '';
		width: 18px;
		height: 18px;
		border-radius: 18px;
		background-color: #fff;
		left: 1px;
		top: 1px;
		cursor: pointer;
		transition: left 0.23s ease, width 0.23s ease, background-color 0.23s ease;
	}

	&:active {
		&::after {
			width: 22px;
		}
	}

	&.switch-on {
		background-color: $color-red;
		border-color: $color-red;

		&.color-blue {
			background-color: $color-blue;
			border-color: $color-blue;
		}

		&.color-orange {
			background-color: $color-orange;
			border-color: $color-orange;
		}

		&.color-green {
			background-color: $color-green;
			border-color: $color-green;
		}

		span {
			color: #fff;
			left: 10px;

			&.switch-on {
				display: inline;
			}

			&.switch-off {
				display: none;
			}
		}

		&:active {
			&::after {
				left: 25px;
			}
		}

		&::after {
			left: 29px;
		}

	}

	&.size-lg {
		width: 60px;

		svg.locked {
			position: relative;
			top: 2px;
			left: 5px;
			width: 16px;
			height: 16px;
			fill: white;
		}

		&.switch-on {
			&:active {
				&::after {
					left: 37px;
				}
			}

			&::after {
				left: 41px;
			}
		}

	}

	&.size-xl {
		width: 100px;
		height: 50px;
		border-radius: 25px;

		&::after {
			position: absolute;
			content: '';
			width: 40px;
			height: 40px;
			border-radius: 40px;
			background-color: #fff;
			left: 10px;
			top: 10px;
			cursor: pointer;
			transition: left 0.25s ease, width 0.25s ease, background-color 0.25s ease;
		}

		svg.locked {
			position: relative;
			top: 12px;
			left: 12px;
			width: 25px;
			height: 25px;
			fill: white;
		}

		&.switch-on {
			&::after {
				left: 56px;
				top: 5px;
			}
		}

		&.switch-off {
			&::after {
				left: 5px;
				top: 5px;
			}
		}

	}

	&.size-sm {
		width: 36px;
		height: 10px;
		overflow: visible;

		span {
			display: none;
		}

		svg.locked {
			position: relative;
			top: -4px;
			left: 4px;
			width: 12px;
			height: 12px;
			fill: white;
		}

		&::after {
			width: 18px;
			height: 18px;
			top: -4px;
			left: -1px;
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.17);
		}

		&:active {
			&::after {
				width: 21px;
			}
		}

		&.switch-disabled {
			background-color: #e5e5e5;
			border-color: #e5e5e5;
			cursor: not-allowed;

			&::after {
				background-color: #d5d5d5;
				box-shadow: none;
				cursor: not-allowed;
			}
		}

		&.switch-on {
			background-color: lighten($color-red, 40);
			border-color: lighten($color-red, 40);

			&.color-blue {
				background-color: lighten($color-blue, 32);
				border-color: lighten($color-blue, 32);

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

			&.color-orange {
				background-color: lighten($color-orange, 30);
				border-color: lighten($color-orange, 30);

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

			&.color-green {
				background-color: lighten($color-green, 45);
				border-color: lighten($color-green, 45);

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

			span {
				display: none;
			}

			&:active {
				&::after {
					left: 15px;
				}
			}

			&::after {
				left: 19px;
				background-color: $color-red;
			}

			&.switch-disabled {
				&::after {
					box-shadow: none;
				}
			}
		}
	}
}