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

/* ------------------------------------ */
/*  RENDER CHECBOX AS A SLIDER-CONTROL  */
/* ------------------------------------ */
.toggle {
	position: relative;
	display: inline-block;
	min-width: 7rem;						/* provide enough width for the slider + its TRUE/FALSE-wording */
	max-width: 7rem;
	padding: 0;
	margin: 0;
}
/* hide the underlying checkbox
	don't display:none - it would prevent tabstop */
.toggle input {
	position: absolute;
	left: -1000rem;
/*	appearance: none;  no effect! => position */
}
/* style the slider in place of the checkbox */
.toggle .slider {
	background-color: #8B0000;				/* checkbox is false: dark red for day & night */
	position: absolute;
	cursor: pointer;
	top: 0; 
	width: 3rem;
	height: 1.5rem;
	border-radius: 1rem;
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem grey;	/* gray shadow for day-theme */
	-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 */
	/* for slow color-change */
	-webkit-transition: all 0.6s ease-in-out;		
	-moz-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}
.byNight .toggle .slider {
	-webkit-box-shadow: 0 0 3rem #FF7777;	/* lighter red */			
	-moz-box-shadow: 0 0 3rem #FF7777;
	box-shadow: 0 0 3rem #FF7777;
}
/* moving toggle-button (=white circle) */
.toggle .slider:before {
	position: absolute;
	content: "";
	background-color: white;
	width: 1rem;
	height: 1rem;							/* basic square */
	border-radius: 0.5rem;					/* make the square a circle */
	left: 0.3rem;							/* 0.25 would be correct - yet it looks ugly */
	bottom: 0.256rem;
	/* slowly change the color & slider-position */
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}
.byNight .toggle .slider:before {
	background-color: #202020; /* extremely dark gray */
}
.toggle input:checked + .slider {
	background-color: forestgreen;		/* checkbox is true: green for day & night */
	/* for slow color-change */
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}
.byNight .toggle input:checked + .slider {
	-webkit-box-shadow: 0 0 3rem #94FF94;	/* light lime */
	-moz-box-shadow: 0 0 3rem #94FF94;
	box-shadow: 0 0 3rem #94FF94;
}

/* move the button from one end to the other */
.toggle input:checked + .slider:before {
	-webkit-transform: translateX(1.4rem);
	-moz-transform: translateX(1.4rem);
	-ms-transform: translateX(1.4rem);
	-o-transform: translateX(1.4rem);
	transform: translateX(1.4rem);
}
/* FALSE = negative-position */
.toggle .slider:after {
	color: #8B0000;						/* dark red for day & night */
	position: absolute;
	font-weight: bold;
	height: 1.6rem;
	left: 3.5rem;
	bottom: 0;
	vertical-align: central;
	/* FALSE: slide to the left => rotation: counterclockwise */
	-webkit-animation: counterclockwise_full 0.6s ;
	-moz-animation: counterclockwise_full 0.6s linear;
	-ms-animation: counterclockwise_full 0.6s linear;
	-o-animation: counterclockwise_full 0.6s linear;
	animation: counterclockwise_full 0.6s ;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

/* slider's NEGATIVE wordings */
.on_off_de .slider:after {
	content: "aus";
}
.on_off_en .slider:after {
	content: "off";
}
.on_off_fr .slider:after {
	content: "éteint";
}

.yes_no_de .slider:after {
	content: "nein";
}
.yes_no_en .slider:after {
	content: "no";
}
.yes_no_fr .slider:after {
	content: "non";
}

/* TRUE = positive-position */
.toggle input:checked + .slider:after {
	color: forestgreen;					/* for day & night */
	/* for slow color-change */
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	/* TRUE: slide to the right => rotation: clockwise */
	-webkit-animation: clockwise_full 0.6s ;
	-moz-animation: clockwise_full 0.6s linear;
	-ms-animation: clockwise_full 0.6s linear;
	-o-animation: clockwise_full 0.6s linear;
	animation: clockwise_full 0.6s ;
}
/* slider's POSITIVE wordings */
.on_off_en input:checked + .slider:after {
	content: "on";
}
.on_off_de input:checked + .slider:after {
	content: "ein";
}
.on_off_fr input:checked + .slider:after {
	content: "allumé";
}
.yes_no_en input:checked + .slider:after {
	content: "yes";
}
.yes_no_de input:checked + .slider:after {
	content: "ja";
}
.yes_no_fr input:checked + .slider:after {
	content: "oui";
}

/* hovering/focusing: brighten the control & TRUE/FALSE-wording - for day & night 
	don't forget the focus on the checkbox itself! (input:checked) */
.toggle input:focus + .slider,
.toggle:hover .slider,
.toggle:focus .slider {
	background-color: red;
}
.toggle input:focus + .slider:after,
.toggle:hover .slider:after,
.toggle:focus .slider:after {
	color: red;							/* for day & night */
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
.toggle input:checked:focus + .slider,
.toggle:hover input:checked + .slider,
.toggle:focus input:checked + .slider {
	background-color: #60C150;			/* light forestgreen for day & night */
}
.toggle input:checked:focus + .slider:after,
.toggle:hover input:checked + .slider:after,
.toggle:focus input:checked + .slider:after {
	color: #60C150;						/* light forestgreen for day & night */
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

/* grey-out a disabled checkbox day & night 
	override hover/focus coloring for disabled chkbox! */
.toggle:hover input:disabled + .slider,
.toggle:focus input:disabled + .slider,
.toggle input:disabled + .slider {
	background-color: grey;
}
.byNight .toggle input:disabled + .slider {
	-webkit-box-shadow: 0 0 2rem lightgray;
	-moz-box-shadow: 0 0 2rem lightgray;
	box-shadow: 0 0 2rem lightgray;
}
.toggle:hover input:disabled .slider:after,
.toggle:focus input:disabled .slider:after,
.toggle:hover input:disabled + .slider:after,
.toggle:focus input:disabled + .slider:after,
.toggle input:disabled .slider:after,
.toggle input:disabled + .slider:after {
	color: grey;
}
#chkHideShareButton {
	margin-left: 7.3rem;
}