/*
 * Based on https://www.w3schools.com/howto/howto_css_switch.asp
 * Sample Usage:
 *   <label class="ir-switch ir-switch-round ir-switch-transition" style="font-size: 2em;">
 *     <input type="checkbox"/>
 *     <span class="ir-slider"></span>
 *   </label>
 */

/* The switch - the box around the slider */
.ir-switch {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 1em;
	border: 0.1em solid rgba(254, 104, 69, 1.0);
	margin: 0 0.2em;
}

.ir-switch-round {
	border-radius: 1em;
}

/* Hide default HTML checkbox */
.ir-switch input {display:none;}

/* The slider */
.ir-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	-webkit-transition: .3s;
	transition: .3s;
}

.ir-slider:before {
	position: absolute;
	content: "";
	height: 0.67em;
	width: 0.67em;
	left: 0.067em;
	bottom: 0.067em;
	background-color: #fe6845;
	-webkit-transition: .3s;
	transition: .3s;
}

.ir-switch-transition input:checked + .ir-slider {
	background-color: #fe6845;
}

.ir-switch-transition input:checked + .ir-slider:before {
	background-color: #fff;
}

input:focus + .ir-slider {
	box-shadow: 0 0 1px #fe6845;
}

input:checked + .ir-slider:before {
	-webkit-transform: translateX(1em);
	-ms-transform: translateX(1em);
	transform: translateX(1em);
}

/* Rounded sliders */
.ir-switch-round .ir-slider {
	border-radius: 1em;
}

.ir-switch-round .ir-slider:before {
	border-radius: 50%;
}