/*
Currently in use at:
- NDN
		perl/Ndn/Dhwebpanel/Domain/Manage.pm.tp
- DH.com
		Numerous pages
- Signup
		Numerous pages

Toggle Component
Allows users to toggle between two states.

Usage:
<div class="Toggle">
	<input class="Toggle__input" type="checkbox" id="toggle" />
	<label for="toggle" class="Toggle__label">
		<span class="Toggle__visible"></span>
		<span class="Toggle__description">
			<span class="Toggle__checked">On</span>
			<span class="Toggle__unchecked">Off</span>
		</span>
	</label>
</div>

*/

.Toggle__input {
	position: absolute;
	margin-left: -9999px;
	visibility: hidden;
}

.Toggle__label {
	display: block;
	line-height: 0px;
}

.Toggle__description {
	position: relative;
	display: inline-block;
	top: -8px;
	padding: 0 .5em 0 0;
	transition: all .2s ease-in-out;
}

.Toggle__label .Toggle__visible {
	display: inline-block;
	position: relative;
	outline: none;
	user-select: none;
}

.Toggle__input + .Toggle__label .Toggle__visible {
	padding: 2px;
	width: 60px;
	height: 30px;
	background-color: $c-g500;
	border-radius: 60px;
	transition: background 0.4s;

	&:before,
	&:after {
		display: block;
		position: absolute;
		content: "";
	}

	&:before {
		top: 2px;
		left: 2px;
		bottom: 2px;
		right: 2px;
		background-color: $c-g500;
		border-radius: 60px;
		transition: background 0.4s;
	}

	&:after {
		position: absolute;
		top: 5px;
		left: 4.5px;
		bottom: 3.5px;
		width: 20px;
		height: 20px;
		background-color: $c-w100;
		border-radius: 22px;
		transition: margin 0.2s, background 0.4s;
	}
}

// Checked state
.Toggle__input:checked + .Toggle__label {
	color: $c-black;

	.Toggle__visible {
		background-color: $c-b300;

		&:before {
			background-color: $c-b300;
		}

		&:after {
			margin-left: 30px;
		}
	}
}

.Toggle__input + .Toggle__label .Toggle__description .Toggle__unchecked,
.Toggle__input:checked + .Toggle__label .Toggle__description .Toggle__checked {
	display: inline-block;
}

.Toggle__input + .Toggle__label .Toggle__description .Toggle__checked,
.Toggle__input:checked + .Toggle__label .Toggle__description .Toggle__unchecked {
	display: none;
}

// Disabled state
.Toggle__input:disabled {
	& + .Toggle__label {
		cursor: not-allowed;
	}

	& + .Toggle__label .Toggle__visible,
	& + .Toggle__label .Toggle__visible:before {
		background-color: $c-g300;
	}

	& + .Toggle__label .Toggle__visible:after,
	& + .Toggle__label .Toggle__visible:hover:after {
		top: 5px;
		bottom: 3.5px;
		width: 20px;
		height: 20px;
		background-color: $c-g100;
	}

	// Hover state
	&:hover,
	&:hover:before {
		background-color: $c-g100;
	}
}

.Toggle__input:disabled + .Toggle__label .Toggle__description {
	color: $c-g400;
}

// Hover states
.Toggle__input:not([disabled]):hover {
	.Toggle__description {
		color: $c-black;
	}

	& + .Toggle__label {
		cursor: pointer;
	}

	& + .Toggle__label .Toggle__visible,
	& + .Toggle__label .Toggle__visible:before {
		background-color: $c-black;
	}

	&:checked + .Toggle__label .Toggle__visible,
	&:checked + .Toggle__label .Toggle__visible:before {
		background-color: darken($c-b300, 10%);
	}
}