/* BuildOrbit: on/off fields are toggle switches everywhere (desk, dialogs, website, web forms).
   Row-selection checkboxes (lists, table rows, select all) stay checkboxes: selecting is a checkbox job. */
:root { --toggle-on: #16a34a; }
[data-theme="dark"] { --toggle-on: #22c55e; }
.frappe-control[data-fieldtype="Check"] input[type="checkbox"],
.frappe-control[data-fieldtype="MultiCheck"] input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative;
	flex: none;
	width: 34px !important;
	height: 20px !important;
	min-width: 34px;
	margin: 0 10px 0 0 !important;
	padding: 0;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--toggle-off, var(--gray-300)) !important;
	background-image: none !important;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06) !important;
	cursor: pointer;
	vertical-align: middle;
	transition: background-color .18s ease;
}
.frappe-control[data-fieldtype="Check"] input[type="checkbox"]::before,
.frappe-control[data-fieldtype="MultiCheck"] input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	transition: transform .18s ease;
}
.frappe-control[data-fieldtype="Check"] input[type="checkbox"]::after,
.frappe-control[data-fieldtype="MultiCheck"] input[type="checkbox"]::after { display: none !important; }
.frappe-control[data-fieldtype="Check"] input[type="checkbox"]:checked,
.frappe-control[data-fieldtype="MultiCheck"] input[type="checkbox"]:checked {
	background: var(--toggle-on) !important;
	background-image: none !important;
}
.frappe-control[data-fieldtype="Check"] input[type="checkbox"]:checked::before,
.frappe-control[data-fieldtype="MultiCheck"] input[type="checkbox"]:checked::before { transform: translateX(14px); }
.frappe-control[data-fieldtype="Check"] input[type="checkbox"]:focus-visible,
.frappe-control[data-fieldtype="MultiCheck"] input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--toggle-on);
	outline-offset: 2px;
}
.frappe-control[data-fieldtype="Check"] input[type="checkbox"]:disabled,
.frappe-control[data-fieldtype="MultiCheck"] input[type="checkbox"]:disabled { opacity: .55; cursor: default; }
/* keep the label vertically centred next to the wider switch */
.frappe-control[data-fieldtype="Check"] .checkbox label,
.frappe-control[data-fieldtype="MultiCheck"] .checkbox label { display: inline-flex; align-items: center; }
/* read-only Yes/No values in list, report and table cells: small switches */
input[type="checkbox"].disabled-selected,
input[type="checkbox"].disabled-deselected {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative;
	width: 26px !important;
	height: 15px !important;
	min-width: 26px;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--toggle-off, var(--gray-300)) !important;
	background-image: none !important;
	box-shadow: none !important;
	vertical-align: middle;
	opacity: 1 !important;
}
input[type="checkbox"].disabled-selected { background: var(--toggle-on) !important; }
input[type="checkbox"].disabled-selected::before,
input[type="checkbox"].disabled-deselected::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
input[type="checkbox"].disabled-selected::before { transform: translateX(11px); }
input[type="checkbox"].disabled-selected::after,
input[type="checkbox"].disabled-deselected::after { display: none !important; }
[data-theme="dark"] input[type="checkbox"].disabled-deselected { background: var(--gray-600) !important; }
[data-theme="dark"] .frappe-control[data-fieldtype="Check"] input[type="checkbox"]:not(:checked),
[data-theme="dark"] .frappe-control[data-fieldtype="MultiCheck"] input[type="checkbox"]:not(:checked) {
	background: var(--gray-600) !important;
}
/* off track in the dark theme: --gray-300 turns light there, so the white knob almost vanished */
[data-theme="dark"] { --toggle-off: var(--app-border-strong); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) { --toggle-off: var(--app-border-strong); } }