label {
	margin-top: 1ex;
}

.custom-check {
	display: table;
	width: auto;
	> * {
		visibility: hidden;
	}
	&.checked > * {
		visibility: visible;
	}
}

.custom-toggle {
	display: inline-block;
	width: auto;
	height: 2.25rem;
	min-width: 58px;
	background: $input-bg;
	border: $input-border-width solid $input-border-color;
	border-radius: 1.25rem;
	transition: background 200ms ease, padding 200ms ease;
	text-align: left;
	padding: 3px 3px 3px 24px;

	&.is-toggled {
		background: $success;
		padding: 3px 24px 3px 3px;
	}

	&.is-invalid,
	&.is-valid {
		background-image: none;
		padding: 3px 24px 3px 3px;
		&.is-toggled {
			padding: 3px 24px 3px 3px;
		}
	}
	&.is-invalid.is-toggled {
		background: red;

		.handle-label {
			color: red;
		}
	}

	&:hover {
		cursor: pointer;
	}

	&:focus {
		border-color: #ced4da;
	}

	.handle {
		display: inline-block;
		min-width: 40px;
		height: 28px;
		background: #fff;
		border-radius: 1rem;
		text-transform: uppercase;
		color: green;
		text-align: center;
		padding: 0 10px;

		.handle-label {
			display: inline-block;
			margin-top: 2px;
			font-size: 18px;
			font-weight: 600;
			white-space: nowrap;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			color: #495057;
		}
	}
}