/*
This causes a toggle control (see example below) to be styled in a certain way

	A text toggle is just a text link that can be toggled back and forth (this example is wrong, update it)
	<control type="textual_toggle">
		<label><input type="radio" name="product[1006][hide_product]" value="unchecked" checked=""><span class="checkmark round"></span></label>
		<label><input type="radio" name="product[1006][hide_product]" value="checked"><span class="checkmark round"></span></label>
	</control>

	<control type="toggle">
		<label><input type="radio" name="product[1006][hide_product]" value="unchecked" checked=""><span class="checkmark round"></span></label>
		<label><input type="radio" name="product[1006][hide_product]" value="checked"><span class="checkmark round"></span></label>
	</control>

	A mode toggle doesn't use a circular slider, it uses an rounded-edge rectangle around a text phrase
	<control type="mode_toggle">
		<label><input type="radio" name="product[1006][hide_product]" value="unchecked" checked=""><span class="checkmark round"></span></label>
		<label><input type="radio" name="product[1006][hide_product]" value="checked"><span class="checkmark round"></span></label>
	</control>
 */

/* type three: the mode toggle */



/* type one: the textual toggle */
/* todo: are we rewriting the textual_toggle */

control { display: block; }

control[type=textual_toggle]										{ position: relative; }
	
control[type=textual_toggle] 										{ display: flex;  width: 100%; flex-direction: row; justify-content: end; gap: 10px; padding: 5px; } /* todo: float: right is not generic */
control[type=textual_toggle] opt 									{ display: inline-block; color: gray; cursor: pointer; font-size: smaller;	padding-right: 4px;		}
control[type=textual_toggle] input[type=radio] 						{ display: none;												}
control[type=textual_toggle] input[type="radio"]:checked ~ opt 		{ text-decoration: underline; color: rgb(48, 48, 48);		   }
control[type=textual_toggle] 							   state 	{ display: none; 												}
control[type=textual_toggle] input[type="radio"]:checked ~ state 	{ display: block; 												}

control[type=textual_toggle] label									{ padding: 2px 0px 8px 0px;										}

/* type two: the lightswitch toggle */

/* todo: better genericize the toggle by changing checking the value of the toggle and instead use first or second child */

control[type=toggle]												{ display: inline-block; width: 60px; height: 34px;			 }
control[type=toggle] label										  	{ position: absolute; cursor: pointer;						  }

control[type=toggle] input										 	{ width: 32px; height: 32px; margin-right: 5px; display: none;  }

control[type=toggle] .checkbang									 	{															   }

control[type=toggle] .checkmark									 	{ position: absolute; top: 0; left: 0; width: 60px; height: 34px; background-color: #eee; border-radius: 34px; } /* Create a custom radio button */

/* ON indicator / off switch */
control[type=toggle] input[value=unchecked] ~ .checkmark			{

	/* if clicked, this turns off the switch */
	background-color: #0971b6;
	/* ergo, we want this to resemble the on state; because clicking something that is on turns it off */
	/* when it is off, it will not appear */

}
control[type=toggle] input[value=unchecked] ~ .checkmark::after			{ content: "✔"; text-align: center; } /* put a checkmark into an unchecked field */

/* OFF indicator / on switch */
control[type=toggle] input[value=checked] ~ .checkmark {
	/* ...if clicked, this turns on */
	background-color: rgba(15,15,15, 0.25);
	/* ...and so, it resembles the off state */
	/* ...and when it is on, it will not appear */
}
control[type=toggle] input[value=checked] ~ .checkmark::after	  		{ content: "✘"; text-align: center; } /* put an X into an unchecked field */

/* don't display the on switch if it is already on, don't display the off switch if it is already off */
control[type=toggle] input[value=unchecked]:checked ~ .checkmark 		{ display: none; }
control[type=toggle] input[value=checked]:checked ~ .checkmark 			{ display: none; }

/* On mouse-over, add a grey background color */
control[type=toggle] label:hover input ~ .checkmark {
	/* background-color: #ccc; */
}

/* When the radio button is checked, add a blue background */
control[type=toggle] label input:checked ~ .checkmark {
	background-color: #2196F3;
	background-color: rgba(33,150,243, 0.4); /* todo: stopgap: prevent darkmode from making this render so trashy */
}

/* Create the indicator (the dot/circle - hidden when not checked) */
control[type=toggle] label .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

control[type=toggle] input[value=unchecked] ~ .checkmark:after 	{ display: block; right: 4px; }
control[type=toggle] input[value=checked] 	~ .checkmark:after 	{ display: block; left: 4px; }

control[type=toggle] input[value=unchecked]:checked ~ .checkmark {

}

/* animation stub. todo: figure out animating the toggle switch */
control[type=toggle] input[value=unchecked]:checked ~ .checkmark:after {

	pointer-events: none; /* propagate clicks to the underlying label; important if the checkmark is a distinct element  */

	display: block;

	animation-name: bounceleft;

}
@keyframes bounceleft {
	0% {
		left: 4px;
	}
	50% {
		right: 4px;
	}
	100% {
		opacity: 0;
	}
}
/* end todo */



/* Style the indicator (dot/circle) */
control[type=toggle] label .checkmark:after {

	top: 4px;

	width: 26px;
	height: 26px;
	line-height: 26px; /* cause the checkmark to be centered to the height */
	border-radius: 50%;
	background: rgba(250,250,250, 1);
	/* todo: we're using the background image generated by http://www.patternify.com as a stopgap to make rendering in dark mode not so trash */
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAABNJREFUGFdj/PXr138GNMBIA0EApUcTp0DGupcAAAAASUVORK5CYII=) repeat;

}