/**
 * UCP Toggle Switches
 *
 * @package stoker/ucptoggle
 * @license GNU General Public License, version 2 (GPL-2.0)
 */

/* Prevent FOUC - hide yes/no radio labels before JS replaces them */
dd:has(> label > input[type="radio"][value="1"]):has(> label > input[type="radio"][value="0"]) > label {
	display: none;
}
/* Hide original radio buttons and labels when replaced by JS */
.stoker-toggle-hidden {
	display: none;
}
/* Toggle switch container */
.stoker-toggle {
	position: relative;
	top: -16px;
	display: inline-block;
	width: 3.025em;
	height: 1.65em;
	vertical-align: middle;
}
/* Responsive: reset offset when dt/dd stack vertically */
@media (max-width: 700px) {
	.stoker-toggle {
		top: -10px;
	}
}
/* Contain floats without clipping toggle overflow */
.panel dl:has(> dd > .stoker-toggle),
fieldset dl:has(> dd > .stoker-toggle) {
	display: flow-root;
	padding-top: 4px;
	padding-bottom: 4px;
}
.stoker-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}
/* Slider track */
.stoker-toggle-slider {
	position: relative;
	display: block;
	width: 3.025em;
	height: 1.65em;
	cursor: pointer;
	border-radius: 0.825em;
	transition: 350ms;
	background: linear-gradient(rgba(0,0,0,0.07), rgba(255,255,255,0)), #ddd;
	box-shadow:
		0 0.077em 0.11em -0.11em rgba(0,0,0,0.4) inset,
		0 0.055em 0.088em -0.011em rgba(255,255,255,0.7);
}
/* Slider knob */
.stoker-toggle-slider::after {
	position: absolute;
	content: '';
	width: 1.1em;
	height: 1.1em;
	top: 0.275em;
	left: 0.275em;
	border-radius: 50%;
	transition: 250ms ease-in-out;
	background:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iNyIgeTE9IjciIHgyPSIxNyIgeTI9IjE3Ij48L2xpbmU+PGxpbmUgeDE9IjE3IiB5MT0iNyIgeDI9IjciIHkyPSIxNyI+PC9saW5lPjwvc3ZnPg==") center / 10px 10px no-repeat,
		linear-gradient(#f5f5f5 10%, #eee);
	box-shadow:
		0 0.11em 0.165em -0.055em rgba(255,255,255,0.9) inset,
		0 0.22em 0.22em -0.132em rgba(0,0,0,0.5);
}
/* Inner track with color indicator */
.stoker-toggle-slider::before {
	position: absolute;
	content: '';
	width: 2.2em;
	height: 0.825em;
	top: 0.4125em;
	left: 0.4125em;
	border-radius: 0.4125em;
	transition: 250ms ease-in-out;
	background: linear-gradient(rgba(0,0,0,0.07), rgba(255,255,255,0.1)), #d0d0d0;
	box-shadow:
		0 0.088em 0.165em -0.11em rgba(0,0,0,0.5) inset,
		0 0.055em 0.088em -0.011em rgba(255,255,255,0.7),
		-1.65em 0 0 0 rgba(220,53,69,0.7) inset;
}
/* Checked state - green track */
.stoker-toggle input:checked + .stoker-toggle-slider::before {
	box-shadow:
		0 0.088em 0.165em -0.11em rgba(0,0,0,0.5) inset,
		0 0.055em 0.088em -0.011em rgba(255,255,255,0.7),
		1.65em 0 0 0 rgba(68,204,102,0.7) inset;
}
/* Checked state - move knob */
.stoker-toggle input:checked + .stoker-toggle-slider::after {
	left: 1.65em;
	background:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjdhZTYwIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMjAgNiA5IDE3IDQgMTIiPjwvcG9seWxpbmU+PC9zdmc+") center / 10px 10px no-repeat,
		linear-gradient(#f5f5f5 10%, #eee);
}
/* Disabled state */
.stoker-toggle input:disabled + .stoker-toggle-slider {
	opacity: 0.5;
	cursor: not-allowed;
}
/* Submit/Reset buttons */
.panel input.button1,
.panel input.button2 {
	background: linear-gradient(#fdfdfd, #eaeaea);
	border: 1px solid #999;
	border-radius: 5px;
	font-size: 11px;
	padding: 6px 10px;
	color: #111;
	cursor: pointer;
	transition: background .2s, box-shadow .2s;
}
.panel input.button1:hover,
.panel input.button2:hover {
	background: linear-gradient(#ffffff, #dcdcdc);
	border-color: #666;
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.panel input.button1:active,
.panel input.button2:active {
	background: #d8d8d8;
	border-color: #555;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.25);
}
/* Select dropdowns */
.panel select {
	font-size: 11px;
	line-height: 0.95;
	padding: 2px 4px;
	border-radius: 4px;
	border: 1px solid silver;
	background-image: linear-gradient(to bottom, #ffffff 0%, #e9e9e9 100%);
}
.panel select:hover {
	background-image: none;
	background-color: #fff;
	border-color: #6fa1d4;
}
/* Dark mode */
/* Toggle track */
html.phpbb-dark-mode .stoker-toggle-slider {
	background: linear-gradient(rgba(255,255,255,0.05), rgba(0,0,0,0.1)), #3a3a3a;
	box-shadow:
		0 0.077em 0.11em -0.11em rgba(0,0,0,0.6) inset,
		0 0.055em 0.088em -0.011em rgba(255,255,255,0.1);
}
/* Toggle knob */
html.phpbb-dark-mode .stoker-toggle-slider::after {
	background:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iNyIgeTE9IjciIHgyPSIxNyIgeTI9IjE3Ij48L2xpbmU+PGxpbmUgeDE9IjE3IiB5MT0iNyIgeDI9IjciIHkyPSIxNyI+PC9saW5lPjwvc3ZnPg==") center / 10px 10px no-repeat,
		linear-gradient(#ccc 10%, #b0b0b0);
	box-shadow:
		0 0.11em 0.165em -0.055em rgba(255,255,255,0.3) inset,
		0 0.22em 0.22em -0.132em rgba(0,0,0,0.7);
}
/* Toggle knob checked */
html.phpbb-dark-mode .stoker-toggle input:checked + .stoker-toggle-slider::after {
	background:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWU4NDQ5IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMjAgNiA5IDE3IDQgMTIiPjwvcG9seWxpbmU+PC9zdmc+") center / 10px 10px no-repeat,
		linear-gradient(#ccc 10%, #b0b0b0);
}
/* Toggle inner track */
html.phpbb-dark-mode .stoker-toggle-slider::before {
	background: linear-gradient(rgba(255,255,255,0.05), rgba(0,0,0,0.1)), #2a2a2a;
	box-shadow:
		0 0.088em 0.165em -0.11em rgba(0,0,0,0.7) inset,
		0 0.055em 0.088em -0.011em rgba(255,255,255,0.1),
		-1.65em 0 0 0 rgba(220,53,69,0.8) inset;
}
/* Toggle checked */
html.phpbb-dark-mode .stoker-toggle input:checked + .stoker-toggle-slider::before {
	box-shadow:
		0 0.088em 0.165em -0.11em rgba(0,0,0,0.7) inset,
		0 0.055em 0.088em -0.011em rgba(255,255,255,0.1),
		1.65em 0 0 0 rgba(68,204,102,0.8) inset;
}
/* Buttons */
html.phpbb-dark-mode .panel input.button1,
html.phpbb-dark-mode .panel input.button2 {
	background: linear-gradient(#3a3a3a, #2a2a2a);
	border-color: #555;
	color: #ddd;
}
html.phpbb-dark-mode .panel input.button1:hover,
html.phpbb-dark-mode .panel input.button2:hover {
	background: linear-gradient(#444, #333);
	border-color: #6fa1d4;
	box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
html.phpbb-dark-mode .panel input.button1:active,
html.phpbb-dark-mode .panel input.button2:active {
	background: #2a2a2a;
	border-color: #666;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.5);
}
/* Select dropdowns */
html.phpbb-dark-mode .panel select {
	background-image: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
	background-color: #2a2a2a;
	border-color: #555;
	color: #ddd;
}
html.phpbb-dark-mode .panel select:hover {
	background-image: none;
	background-color: #3a3a3a;
	border-color: #6fa1d4;
}