/* ============================================================================== 
   File: scr_checkbox.css
	- Stylesheet for ArchiComix CHECKBOXES (taken from TipTool and amended)
		for ANY viewports
	- Author: Daniel Hugentobler (DH)
	- created: 25.SEP.2020
	- 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: darkorange;				/* checkbox is false: 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 orange;	/* glow */			
	-moz-box-shadow: 0 0 3rem orange;
	box-shadow: 0 0 3rem orange;
}
/* 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: #669cff; /* brighter tint of complement-blue */	
	/* 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 #669cff; /* blueish glow */
	-moz-box-shadow: 0 0 3rem #669cff;
	box-shadow: 0 0 3rem #669cff;
}

/* 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: darkorange;						/* 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_en .slider:after {
	content: "off";
}
.on_off_de .slider:after {
	content: "aus";
}
.yes_no_en .slider:after {
	content: "no";
}
.yes_no_de .slider:after {
	content: "nein";
}

/* TRUE = positive-position */
.toggle input:checked + .slider:after {
	color: #669cff; /* brighter tint of complement-blue */	/* 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";
}
.yes_no_en input:checked + .slider:after {
	content: "yes";
}
.yes_no_de input:checked + .slider:after {
	content: "ja";
}

/* 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: #ffbf00;	/* amber */
}
.toggle input:focus + .slider:after,
.toggle:hover .slider:after,
.toggle:focus .slider:after {
	color: #ffbf00;				/* amber, 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: lightseagreen; /* for day & night */
}
.toggle input:checked:focus + .slider:after,
.toggle:hover input:checked + .slider:after,
.toggle:focus input:checked + .slider:after {
	color: lightseagreen;
	-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;
}