/* ============================================================================== 
   File: scr_radio.css
	- Stylesheet for TipTool RADIO-BUTTONS 
		for ANY viewports
	- Author: Daniel Hugentobler (DH)
	- created: 19.DEC.2018, taken from scr_generic.css
	- amended: -
   ============================================================================== */

/* select menu-position: wrappers for radio-buttons */
#menuPosWrapper {
	margin: 0;
	padding: 0;
	display: inline-block;
	min-height: 6rem;
	border-radius: 1rem;
	background-color: #D8EBAD;							/* light olive */
}
.byNight #menuPosWrapper {
	background-color: #202020;							/* extremely dark gray */
}
.menuPosWrapperRow {
}

/* ------------------------------------ */
/*   RENDER RADIO-BUTTON AS A DOUGHNUT  */
/* ------------------------------------ */
.radioContainer {
	position: relative;
	display: inline-block;
	min-width: 6rem;
	max-width: 6rem;
	margin: 0;
	padding: 0;
	padding-top: 2rem;
	padding-bottom: 2rem;
	user-select: none;
}
.radioContainer input {
	display: none;
}
/* create the radiobutton (big circle) */
.customRadio {
	background-color: #8B0000;							/* dark red for day & night */
	position: absolute;
	height: 2.4rem;
	width: 2.4rem;
	border-radius: 50%;
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem grey;
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem grey;
	box-shadow: 0.4rem 0.4rem 0.6rem grey;				/* a bit larger for MS IEx */
}
.byNight .customRadio {
	-webkit-box-shadow: 0 0 2rem #FF6666;				/* light red glow */
	-moz-box-shadow: 0 0 2rem #FF6666;
	box-shadow: 0 0 2rem #FF6666;
}
/* grey-out a disabled radio-button day & night */
.customRadio:disabled {
	background-color: grey;								/* for day & night */
}
.customRadio.top_left {
	top: 0.4rem;
	left: 1.4rem;
}
.customRadio.top_right {
	top: 0.4rem;
	right: 1.4rem;
}
.customRadio.bottom_left {
	bottom: 0.4rem;
	left: 1.4rem;
}
.customRadio.bottom_right {
	bottom: 0.4rem;
	right: 1.4rem;
}

/* define slow transition for most actions */
.radioContainer input ~ .customRadio,
.radioContainer input:checked ~ .customRadio,
.radioContainer input:checked ~ .customRadio:after,
.byNight .radioContainer input ~ .customRadio,
.byNight .radioContainer input:checked ~ .customRadio,
.radioContainer .customRadio:after,
.radioContainer:hover input ~ .customRadio,
.radioContainer:focus input ~ .customRadio {
	-webkit-transition: all 0.7s ease;		
	-moz-transition: all 0.7s ease;
	-ms-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
/* radio button is checked: green background */
.radioContainer input:checked ~ .customRadio {
	background-color: forestgreen;
}
.byNight .radioContainer input:checked ~ .customRadio {
	-webkit-box-shadow: 0 0 2rem #94FF94;	/* light lime glow */
	-moz-box-shadow: 0 0 2rem #94FF94;
	box-shadow: 0 0 2rem #94FF94;
}
 
/* Create the radiobutton's center (small circle) 
	as if it was a tiny pushbutton */
.customRadio:after {
	display: block;
	content: "";
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	width: 1rem;
	height: 1rem;
	border: 0.1rem outset gray;
	border-radius: 50%;
	background-color: lightgray;
	-webkit-box-shadow: 0.1rem 0.1rem 0.3rem #404040;	/* very dark gray */
	-moz-box-shadow: 0.1rem 0.1rem 0.3rem #404040;
	box-shadow: 0.2rem 0.2rem 0.6rem #404040;			/* a bit larger for MS IEx */
}
.byNight .customRadio:after {
	background: gray;
}
/* Style the CHECKED center (small circle) 
	as if the tiny PB was pushed down to the olive background */
.radioContainer input:checked ~ .customRadio:after { 
	background: #D8EBAD;								/* light olive */
	border: none;
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem inset gray;
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem inset gray;
	box-shadow: 0.4rem 0.4rem 0.6rem inset gray;		/* a bit larger for MS IEx */
}
.byNight .radioContainer input:checked ~ .customRadio:after {
	background: #202020;								/* extremely dark gray */
	-webkit-box-shadow: 0 0 0.8rem inset #94FF94;		/* light lime xxxxxx */
	-moz-box-shadow: 0 0 0.8rem inset #94FF94;
	box-shadow: 0 0 0.8rem inset #94FF94;
}

/* hovering/focusing: brighten the control - for day & night */
.radioContainer:hover input ~ .customRadio,
.radioContainer:focus input ~ .customRadio {
	background-color: red;
}
.radioContainer:hover input:checked ~ .customRadio,
.radioContainer:focus input:checked ~ .customRadio {
	background-color: #60C150;			/* light forestgreen */
}