/**
	HTML example of switch format:
	<div class="twrpb-switch">
		<input class="twrpb-switch__input"  type="radio" name="da" value="0">
		<input class="twrpb-switch__input" type="radio" name="da" value="1">
		<span class="twrpb-switch__slider">
			<label class="twrpb-switch__slider-label-disabled"></label>
			<label class="twrpb-switch__slider-label-enabled"></label>
		</span>
	</div>
*/

.twrpb-switch {
	position: relative;
	display: inline-block;
	width: 3.6em;
	height: 2em;
	color: black;

	// Adding !important because WordPress.
	&__input {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		z-index: 1 !important;
		width: 100% !important;
		height: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		opacity: 0 !important;
	}

	&__slider {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #ccc;
		border-radius: 30%/50%;
		transition: background-color 0.4s ease;
	}

	&__slider::after {
		position: absolute;
		top: 0.25em;
		left: 0.25em;
		width: 1.5em;
		height: 1.5em;
		content: "";
		background-color: white;
		border-radius: 50%;
		transition: transform 0.4s ease;
	}

	/** Add a focus state */
	&__input:focus + &__slider {
		box-shadow: 0 0 1px #2196f3;
	}

	/** If enabled, change the background and move the slider to the right. */
	&__input[value="true"]:checked + &__slider {
		background-color: #2196f3;
	}

	&__input[value="true"]:checked + &__slider::after {
		transform: translateX(1.6em);
	}

	// Make the radio with input checked to go behind the one with the input unchecked.
	&__input[value="true"]:checked {
		z-index: 0 !important;
	}

	/** Additional, add some labels with checked/unchecked. */
	&__slider-label-disabled,
	&__slider-label-enabled {
		position: absolute;
		font-size: 1.3em;
		line-height: 1.45em;
	}

	&__slider-label-enabled {
		left: 0.4em;
	}

	&__slider-label-enabled::after {
		content: "\2713";
	}

	&__slider-label-disabled {
		right: 0.4em;
	}

	&__slider-label-disabled::after {
		content: "\2717";
	}

	/** Additional, hide labels, even though not necessary */
	&__input[value="true"]:checked + &__slider &__slider-label-disabled::after {
		width: 0;
		height: 0;
		font-size: 0;
	}

	&__input[value="true"]:not(:checked) ~ &__slider &__slider-label-enabled::after {
		width: 0;
		height: 0;
		font-size: 0;
	}
}