/* Sarus reusable form controls. Keep page layout in the page CSS. */

/* Toggle: binary by default, tri-state with data-tristate="true". */
.sarus-toggle,
.sarus-switch,
.customer-switch,
.download-switch {
	--sarus-toggle-width: 58px;
	--sarus-toggle-height: 24px;
	--sarus-toggle-pad: 3px;
	--sarus-toggle-thumb-offset-x: 2px;
	--sarus-toggle-thumb: 20px;
	--sarus-toggle-track-off: #F5E5E5;
	--sarus-toggle-track-off-border: #1257A4;
	--sarus-toggle-track-on: #1976D2;
	--sarus-toggle-track-on-border: #1257A4;
	--sarus-toggle-track-unset: #F7F7F8;
	--sarus-toggle-track-unset-border: #1257A4;
	--sarus-toggle-thumb-color: rgba(255, 255, 255, 0.96);
	--sarus-toggle-thumb-border: #DCA8AD;
	--sarus-toggle-thumb-unset: rgba(255, 255, 255, 0.96);
	--sarus-toggle-text-off: #A8A4A4;
	--sarus-toggle-text-on: #FFFFFF;
	--sarus-toggle-text-int: #1B4269;
	--sarus-toggle-text-disabled: #FFFFFF;
	--sarus-toggle-disabled-track: #8FA7C4;
	--sarus-toggle-disabled-border: #5D7694;
	--sarus-toggle-disabled-thumb-border: #5D7694;
	--sarus-toggle-disabled-thumb: rgba(255, 255, 255, 0.72);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--text);
	font-size: 14px;
	font-weight: 650;
	white-space: nowrap;
}

.sarus-toggle--lg,
.sarus-switch--lg,
.download-switch {
	--sarus-toggle-width: 58px;
	--sarus-toggle-height: 24px;
	--sarus-toggle-pad: 3px;
	--sarus-toggle-thumb-offset-x: 2px;
	--sarus-toggle-thumb: 20px;
	gap: 10px;
	color: var(--text-soft, var(--text));
	font-weight: 500;
}

.sarus-toggle input,
.sarus-switch input,
.customer-switch input,
.download-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}

.sarus-toggle__slider,
.sarus-switch__slider,
.customer-switch-slider,
.download-switch-slider {
	position: relative;
	width: var(--sarus-toggle-width);
	height: var(--sarus-toggle-height);
	border-radius: 999px;
	background: var(--sarus-toggle-track-off);
	border: 1px solid var(--sarus-toggle-track-off-border);
	flex: 0 0 auto;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 16px rgba(27, 25, 22, 0.12);
}

.sarus-toggle__copy {
	position: absolute;
	top: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(11px, calc(var(--sarus-toggle-height) * 0.34), 16px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--sarus-toggle-text-off);
	text-align: center;
	padding: 0 10px;
	pointer-events: none;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transition: opacity 0.15s ease;
}


.sarus-toggle__copy--off, .sarus-toggle__copy--on {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(var(--sarus-toggle-width) - var(--sarus-toggle-thumb) - (var(--sarus-toggle-pad) * 2));
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
}
.sarus-toggle__copy--off {
	color: var(--sarus-toggle-text-off);
	right: 0;
	padding-left: 4px;
}
.sarus-toggle__copy--on {
	color: var(--sarus-toggle-text-on);
	left: 0;
	padding-right: 4px;
}

.sarus-toggle input + .sarus-toggle__slider .sarus-toggle__copy--off,
.sarus-switch input + .sarus-switch__slider .sarus-toggle__copy--off,
.customer-switch input + .customer-switch-slider .sarus-toggle__copy--off,
.download-switch input + .download-switch-slider .sarus-toggle__copy--off {
	opacity: 1;
}

.sarus-toggle input:checked + .sarus-toggle__slider .sarus-toggle__copy--off,
.sarus-switch input:checked + .sarus-switch__slider .sarus-toggle__copy--off,
.customer-switch input:checked + .customer-switch-slider .sarus-toggle__copy--off,
.download-switch input:checked + .download-switch-slider .sarus-toggle__copy--off {
	opacity: 0;
}

.sarus-toggle input:checked + .sarus-toggle__slider .sarus-toggle__copy--on,
.sarus-switch input:checked + .sarus-switch__slider .sarus-toggle__copy--on,
.customer-switch input:checked + .customer-switch-slider .sarus-toggle__copy--on,
.download-switch input:checked + .download-switch-slider .sarus-toggle__copy--on {
	opacity: 1;
}

.sarus-toggle__slider::before,
.sarus-switch__slider::before,
.customer-switch-slider::before,
.download-switch-slider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--sarus-toggle-thumb-offset-x);
	width: var(--sarus-toggle-thumb);
	height: var(--sarus-toggle-thumb);
	border-radius: 50%;
	background: var(--sarus-toggle-thumb-color);
	border: 1px solid var(--sarus-toggle-thumb-border, var(--sarus-toggle-track-off-border));
	box-shadow: 0 4px 10px rgba(27, 25, 22, 0.18);
	transition: transform 0.15s ease, background 0.15s ease;
	transform: translateY(-50%);
	z-index: 2;
}

.sarus-toggle input:checked + .sarus-toggle__slider,
.sarus-switch input:checked + .sarus-switch__slider,
.customer-switch input:checked + .customer-switch-slider,
.download-switch input:checked + .download-switch-slider {
	background: var(--sarus-toggle-track-on);
	border-color: var(--sarus-toggle-track-on-border);
}

.sarus-toggle--lg input:checked + .sarus-toggle__slider,
.sarus-switch--lg input:checked + .sarus-switch__slider,
.download-switch input:checked + .download-switch-slider {
	background: var(--sarus-toggle-track-on);
	border-color: var(--sarus-toggle-track-on-border);
}

.sarus-toggle--status .sarus-toggle__slider,
.sarus-switch--status .sarus-switch__slider {
	background: var(--danger);
	border-color: color-mix(in srgb, var(--danger) 78%, #000);
}

.sarus-toggle--status input:checked + .sarus-toggle__slider,
.sarus-switch--status input:checked + .sarus-switch__slider {
	background: var(--success);
	border-color: color-mix(in srgb, var(--success) 78%, #000);
}

.sarus-toggle input:checked + .sarus-toggle__slider::before,
.sarus-switch input:checked + .sarus-switch__slider::before,
.customer-switch input:checked + .customer-switch-slider::before,
.download-switch input:checked + .download-switch-slider::before {
	transform: translate(calc(var(--sarus-toggle-width) - var(--sarus-toggle-thumb) - var(--sarus-toggle-thumb-offset-x) - var(--sarus-toggle-thumb-offset-x)), -50%);
	background: var(--sarus-toggle-thumb-color);
}

.sarus-toggle input:focus + .sarus-toggle__slider,
.sarus-switch input:focus + .sarus-switch__slider,
.customer-switch input:focus + .customer-switch-slider {
	box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.16);
}

.sarus-toggle--lg input:focus + .sarus-toggle__slider,
.sarus-switch--lg input:focus + .sarus-switch__slider,
.download-switch input:focus + .download-switch-slider {
	box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.12);
}

.sarus-toggle input:disabled + .sarus-toggle__slider,
.sarus-switch input:disabled + .sarus-switch__slider,
.customer-switch input:disabled + .customer-switch-slider,
	.download-switch input:disabled + .download-switch-slider {
	background: var(--sarus-toggle-disabled-track);
	border-color: var(--sarus-toggle-disabled-border);
	box-shadow: none;
	opacity: 0.92;
	cursor: not-allowed;
}

.sarus-toggle input:disabled + .sarus-toggle__slider::before,
.sarus-switch input:disabled + .sarus-switch__slider::before,
.customer-switch input:disabled + .customer-switch-slider::before,
.download-switch input:disabled + .download-switch-slider::before {
	background: var(--sarus-toggle-disabled-thumb);
	border-color: var(--sarus-toggle-disabled-thumb-border);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

.sarus-toggle input:disabled ~ span,
.sarus-switch input:disabled ~ span,
.customer-switch input:disabled ~ span,
.download-switch input:disabled ~ span {
	color: color-mix(in srgb, var(--text) 38%, var(--muted));
	cursor: not-allowed;
}

/* Toggle tri-state mode: off, unset, on. */
.sarus-toggle[data-tristate="true"],
.sarus-tristate {
	--sarus-toggle-tri-width: 78px;
	--sarus-toggle-tri-height: 24px;
	--sarus-toggle-tri-pad: 3px;
	--sarus-toggle-tri-thumb: 20px;
	--sarus-toggle-track-on: #1976D2;
	--sarus-toggle-track-on-border: #1257A4;
	--sarus-toggle-tri-track-off: #F5E5E5;
	--sarus-toggle-tri-track-off-border: #1257A4;
	--sarus-toggle-tri-track-unset: #F7F7F8;
	--sarus-toggle-tri-track-unset-border: #1257A4;
	--sarus-toggle-tri-thumb-color: rgba(255, 255, 255, 0.96);
	--sarus-toggle-tri-thumb-border: #828487;
	--sarus-toggle-tri-thumb-unset: rgba(255, 255, 255, 0.96);
	--sarus-toggle-disabled-track: #8FA7C4;
	--sarus-toggle-disabled-border: #5D7694;
	--sarus-toggle-disabled-thumb: rgba(255, 255, 255, 0.72);
}

.sarus-tristate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	font-size: 14px;
	font-weight: 650;
}

.sarus-toggle[data-tristate="true"] .sarus-toggle__slider,
.sarus-tristate__control {
	position: relative;
	width: var(--sarus-toggle-tri-width);
	height: var(--sarus-toggle-tri-height);
	border-radius: 999px;
	border: 1px solid var(--sarus-toggle-tri-track-unset-border);
	background: var(--sarus-toggle-tri-track-unset);
	padding: 0 calc((var(--sarus-toggle-tri-thumb) * 0.68) + var(--sarus-toggle-tri-pad));
	cursor: pointer;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 16px rgba(27, 25, 22, 0.12);
}

.sarus-toggle[data-tristate="true"] .sarus-toggle__copy,
.sarus-tristate .sarus-toggle__copy,
.sarus-toggle[data-tristate="true"] .sarus-tristate__copy,
.sarus-tristate .sarus-tristate__copy {
	color: var(--sarus-toggle-text-int);
}

.sarus-toggle[data-tristate="true"][data-sarus-state="off"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="off"] .sarus-toggle__copy {
	color: var(--sarus-toggle-text-off);
}

.sarus-toggle[data-tristate="true"][data-sarus-state="on"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="on"] .sarus-toggle__copy {
	color: var(--sarus-toggle-text-on);
}

.sarus-toggle[data-tristate="true"][data-sarus-state="int"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="int"] .sarus-toggle__copy {
	color: var(--sarus-toggle-text-int);
}

.sarus-toggle[data-tristate="true"][data-sarus-state="off"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="off"] .sarus-toggle__copy {
	left: calc(var(--sarus-toggle-tri-pad) + var(--sarus-toggle-tri-thumb));
	width: calc(var(--sarus-toggle-tri-width) - var(--sarus-toggle-tri-thumb) - (var(--sarus-toggle-tri-pad) * 2));
}

.sarus-toggle[data-tristate="true"][data-sarus-state="on"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="on"] .sarus-toggle__copy {
	left: var(--sarus-toggle-tri-pad);
	width: calc(var(--sarus-toggle-tri-width) - var(--sarus-toggle-tri-thumb) - (var(--sarus-toggle-tri-pad) * 2));
}

.sarus-toggle[data-tristate="true"][data-sarus-state="int"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="int"] .sarus-toggle__copy {
	left: var(--sarus-toggle-tri-pad);
	width: calc(var(--sarus-toggle-tri-width) - (var(--sarus-toggle-tri-pad) * 2));
}

.sarus-toggle[data-tristate="true"] .sarus-toggle__slider::before {
	display: none;
}

.sarus-toggle__thumb,
.sarus-tristate__thumb {
	position: absolute;
	top: 50%;
	left: var(--sarus-toggle-tri-pad);
	width: var(--sarus-toggle-tri-thumb);
	height: var(--sarus-toggle-tri-thumb);
	border-radius: 50%;
	background: var(--sarus-toggle-tri-thumb-color);
	border: 1px solid var(--sarus-toggle-tri-thumb-border, var(--sarus-toggle-tri-track-off-border));
	box-shadow: 0 4px 10px rgba(27, 25, 22, 0.18);
	transition: transform 0.15s ease, background 0.15s ease;
	transform: translateY(-50%);
	z-index: 2;
}

.sarus-toggle[data-tristate="true"][data-value="0"] .sarus-toggle__slider,
.sarus-tristate[data-value="0"] .sarus-tristate__control {
	background: var(--sarus-toggle-tri-track-off);
	border-color: var(--sarus-toggle-tri-track-off-border);
}

.sarus-toggle[data-tristate="true"][data-value=""] .sarus-toggle__slider,
.sarus-tristate[data-value=""] .sarus-tristate__control {
	background: var(--sarus-toggle-tri-track-unset);
	border-color: var(--sarus-toggle-tri-track-unset-border);
}

.sarus-toggle[data-tristate="true"][data-value="1"] .sarus-toggle__slider,
.sarus-tristate[data-value="1"] .sarus-tristate__control {
	background: var(--sarus-toggle-track-on);
	border-color: var(--sarus-toggle-track-on-border);
}

.sarus-toggle[data-tristate="true"][data-value="0"] .sarus-toggle__thumb,
.sarus-tristate[data-value="0"] .sarus-tristate__thumb {
	transform: translate(0, -50%);
	background: var(--sarus-toggle-tri-thumb-color);
}

.sarus-toggle[data-tristate="true"][data-value=""] .sarus-toggle__thumb,
.sarus-tristate[data-value=""] .sarus-tristate__thumb {
	transform: translate(calc((var(--sarus-toggle-tri-width) - var(--sarus-toggle-tri-thumb) - var(--sarus-toggle-tri-pad) - var(--sarus-toggle-tri-pad)) / 2), -50%);
	background: var(--sarus-toggle-tri-thumb-unset);
}

.sarus-toggle[data-tristate="true"][data-value="1"] .sarus-toggle__thumb,
.sarus-tristate[data-value="1"] .sarus-tristate__thumb {
	transform: translate(calc(var(--sarus-toggle-tri-width) - var(--sarus-toggle-tri-thumb) - var(--sarus-toggle-tri-pad) - var(--sarus-toggle-tri-pad)), -50%);
	background: var(--sarus-toggle-tri-thumb-color);
}

.sarus-toggle[data-tristate="true"] .sarus-toggle__slider:focus-visible,
.sarus-tristate__control:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.16);
}

.sarus-toggle.is-disabled .sarus-toggle__slider,
.sarus-toggle[data-disabled="true"] .sarus-toggle__slider,
.sarus-toggle[data-tristate="true"] input:disabled + .sarus-toggle__slider,
.sarus-tristate.is-disabled .sarus-tristate__control,
.sarus-tristate[data-disabled="true"] .sarus-tristate__control {
	background: var(--sarus-toggle-disabled-track);
	border-color: var(--sarus-toggle-disabled-border);
	box-shadow: none;
	opacity: 0.92;
	cursor: not-allowed;
}

.sarus-toggle.is-disabled .sarus-toggle__thumb,
.sarus-toggle[data-disabled="true"] .sarus-toggle__thumb,
.sarus-toggle[data-tristate="true"] input:disabled + .sarus-toggle__slider .sarus-toggle__thumb,
.sarus-tristate.is-disabled .sarus-tristate__thumb,
.sarus-tristate[data-disabled="true"] .sarus-tristate__thumb {
	background: var(--sarus-toggle-disabled-thumb);
	border-color: var(--sarus-toggle-disabled-thumb-border);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

.sarus-toggle.is-disabled,
.sarus-toggle[data-disabled="true"],
.sarus-tristate.is-disabled,
.sarus-tristate[data-disabled="true"] {
	color: color-mix(in srgb, var(--text) 38%, var(--muted));
	cursor: not-allowed;
}

.sarus-toggle.is-readonly,
.sarus-tristate.is-readonly {
	pointer-events: none;
	cursor: default;
}

.sarus-toggle.is-readonly .sarus-toggle__slider,
.sarus-tristate.is-readonly .sarus-tristate__control {
	cursor: default;
}

body[data-theme="dark"] .sarus-toggle[data-tristate="true"],
body[data-theme="dark"] .sarus-tristate {
	--sarus-toggle-tri-track-off: #1976D2;
	--sarus-toggle-tri-track-off-border: #1257A4;
	--sarus-toggle-tri-track-unset: #1976D2;
	--sarus-toggle-tri-track-unset-border: #1257A4;
	--sarus-toggle-track-on: #1976D2;
	--sarus-toggle-track-on-border: #1257A4;
	--sarus-toggle-tri-thumb-color: rgba(255, 255, 255, 0.96);
	--sarus-toggle-tri-thumb-unset: rgba(255, 255, 255, 0.96);
	--sarus-toggle-disabled-track: #8FA7C4;
	--sarus-toggle-disabled-border: #5D7694;
	--sarus-toggle-disabled-thumb: rgba(255, 255, 255, 0.72);
}

body[data-theme="dark"] .sarus-toggle,
body[data-theme="dark"] .sarus-switch,
body[data-theme="dark"] .customer-switch,
body[data-theme="dark"] .download-switch {
	--sarus-toggle-track-off: #1976D2;
	--sarus-toggle-track-off-border: #1257A4;
	--sarus-toggle-track-on: #1976D2;
	--sarus-toggle-track-on-border: #1257A4;
	--sarus-toggle-track-unset: #1976D2;
	--sarus-toggle-track-unset-border: #1257A4;
	--sarus-toggle-thumb-color: rgba(255, 255, 255, 0.96);
	--sarus-toggle-thumb-unset: rgba(255, 255, 255, 0.96);
	--sarus-toggle-disabled-track: #8FA7C4;
	--sarus-toggle-disabled-border: #5D7694;
	--sarus-toggle-disabled-thumb: rgba(255, 255, 255, 0.72);
}

body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-value="0"] .sarus-toggle__slider,
body[data-theme="dark"] .sarus-tristate[data-value="0"] .sarus-tristate__control {
	background: var(--sarus-toggle-tri-track-off);
	border-color: var(--sarus-toggle-tri-track-off-border);
}

body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-value=""] .sarus-toggle__slider,
body[data-theme="dark"] .sarus-tristate[data-value=""] .sarus-tristate__control {
	background: var(--sarus-toggle-tri-track-unset);
	border-color: var(--sarus-toggle-tri-track-unset-border);
}

.sarus-toggle[data-tristate="true"].is-disabled .sarus-toggle__slider,
.sarus-toggle[data-tristate="true"][data-disabled="true"] .sarus-toggle__slider,
.sarus-toggle[data-tristate="true"][data-disabled="true"][data-value="0"] .sarus-toggle__slider,
.sarus-toggle[data-tristate="true"][data-disabled="true"][data-value=""] .sarus-toggle__slider,
.sarus-toggle[data-tristate="true"][data-disabled="true"][data-value="1"] .sarus-toggle__slider,
.sarus-toggle[data-tristate="true"] input:disabled + .sarus-toggle__slider,
.sarus-tristate.is-disabled .sarus-tristate__control,
.sarus-tristate[data-disabled="true"] .sarus-tristate__control,
.sarus-tristate[data-disabled="true"][data-value="0"] .sarus-tristate__control,
.sarus-tristate[data-disabled="true"][data-value=""] .sarus-tristate__control,
.sarus-tristate[data-disabled="true"][data-value="1"] .sarus-tristate__control {
	background: var(--sarus-toggle-disabled-track);
	border-color: var(--sarus-toggle-disabled-border);
	box-shadow: none;
	cursor: not-allowed;
}

.sarus-toggle[data-tristate="true"].is-disabled .sarus-toggle__thumb,
.sarus-toggle[data-tristate="true"][data-disabled="true"] .sarus-toggle__thumb,
.sarus-toggle[data-tristate="true"][data-disabled="true"][data-value="0"] .sarus-toggle__thumb,
.sarus-toggle[data-tristate="true"][data-disabled="true"][data-value=""] .sarus-toggle__thumb,
.sarus-toggle[data-tristate="true"][data-disabled="true"][data-value="1"] .sarus-toggle__thumb,
.sarus-toggle[data-tristate="true"] input:disabled + .sarus-toggle__slider .sarus-toggle__thumb,
.sarus-tristate.is-disabled .sarus-tristate__thumb,
.sarus-tristate[data-disabled="true"] .sarus-tristate__thumb,
.sarus-tristate[data-disabled="true"][data-value="0"] .sarus-tristate__thumb,
.sarus-tristate[data-disabled="true"][data-value=""] .sarus-tristate__thumb,
.sarus-tristate[data-disabled="true"][data-value="1"] .sarus-tristate__thumb {
	background: var(--sarus-toggle-disabled-thumb);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

body[data-theme="dark"] .sarus-toggle[data-tristate="true"].is-disabled .sarus-toggle__slider,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-disabled="true"] .sarus-toggle__slider,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-disabled="true"][data-value="0"] .sarus-toggle__slider,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-disabled="true"][data-value=""] .sarus-toggle__slider,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-disabled="true"][data-value="1"] .sarus-toggle__slider,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"] input:disabled + .sarus-toggle__slider,
body[data-theme="dark"] .sarus-tristate.is-disabled .sarus-tristate__control,
body[data-theme="dark"] .sarus-tristate[data-disabled="true"] .sarus-tristate__control,
body[data-theme="dark"] .sarus-tristate[data-disabled="true"][data-value="0"] .sarus-tristate__control,
body[data-theme="dark"] .sarus-tristate[data-disabled="true"][data-value=""] .sarus-tristate__control,
body[data-theme="dark"] .sarus-tristate[data-disabled="true"][data-value="1"] .sarus-tristate__control {
	background: var(--sarus-toggle-disabled-track);
	border-color: var(--sarus-toggle-disabled-border);
	box-shadow: none;
	cursor: not-allowed;
}

body[data-theme="dark"] .sarus-toggle[data-tristate="true"].is-disabled .sarus-toggle__thumb,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-disabled="true"] .sarus-toggle__thumb,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-disabled="true"][data-value="0"] .sarus-toggle__thumb,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-disabled="true"][data-value=""] .sarus-toggle__thumb,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"][data-disabled="true"][data-value="1"] .sarus-toggle__thumb,
body[data-theme="dark"] .sarus-toggle[data-tristate="true"] input:disabled + .sarus-toggle__slider .sarus-toggle__thumb,
body[data-theme="dark"] .sarus-tristate.is-disabled .sarus-tristate__thumb,
body[data-theme="dark"] .sarus-tristate[data-disabled="true"] .sarus-tristate__thumb,
body[data-theme="dark"] .sarus-tristate[data-disabled="true"][data-value="0"] .sarus-tristate__thumb,
body[data-theme="dark"] .sarus-tristate[data-disabled="true"][data-value=""] .sarus-tristate__thumb,
body[data-theme="dark"] .sarus-tristate[data-disabled="true"][data-value="1"] .sarus-tristate__thumb {
	background: var(--sarus-toggle-disabled-thumb);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

/* Spin edit */
.sarus-spinedit,
.sarus-spin,
.number-spin-compact {
	position: relative;
	display: inline-block;
	width: 6rem;
	min-width: 6rem;
}

.sarus-spinedit--narrow,
.sarus-spin--narrow,
.database-series-decimals-spin {
	width: 52px;
	min-width: 52px;
}

.sarus-spinedit .form-control,
.sarus-spin .form-control,
.number-spin-compact .form-control {
	width: 100%;
	min-width: 0;
	padding-left: 8px;
	padding-right: calc(1.35rem + 9px);
	text-align: right;
}

.sarus-spinedit__buttons,
.sarus-spin__buttons,
.number-spin-buttons {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 1.35rem;
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--border);
	background: transparent;
}

.sarus-spinedit__btn,
.sarus-spin__btn,
.number-spin-btn {
	flex: 1;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sarus-spinedit__btn:hover,
.sarus-spinedit__btn:focus-visible,
.sarus-spin__btn:hover,
.sarus-spin__btn:focus-visible,
.number-spin-btn:hover,
.number-spin-btn:focus-visible {
	background: var(--hover);
	color: var(--text);
	outline: none;
}

.sarus-spinedit__triangle,
.sarus-spin__triangle,
.triangle {
	width: 0;
	height: 0;
	display: block;
}

.sarus-spinedit__triangle--up,
.sarus-spin__triangle--up,
.triangle-up {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 5px solid currentColor;
}

.sarus-spinedit__triangle--down,
.sarus-spin__triangle--down,
.triangle-down {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

input[type="number"].no-native-spinner::-webkit-inner-spin-button,
input[type="number"].no-native-spinner::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"].no-native-spinner {
	appearance: textfield;
	-moz-appearance: textfield;
}

body[data-theme="dark"] .sarus-spinedit__buttons,
body[data-theme="dark"] .sarus-spin__buttons,
body[data-theme="dark"] .number-spin-buttons {
	border-left-color: rgba(103, 128, 167, 0.42);
}

body[data-theme="dark"] .sarus-spinedit__btn,
body[data-theme="dark"] .sarus-spin__btn,
body[data-theme="dark"] .number-spin-btn {
	color: var(--muted);
}

body[data-theme="dark"] .sarus-spinedit__btn:hover,
body[data-theme="dark"] .sarus-spinedit__btn:focus-visible,
body[data-theme="dark"] .sarus-spin__btn:hover,
body[data-theme="dark"] .sarus-spin__btn:focus-visible,
body[data-theme="dark"] .number-spin-btn:hover,
body[data-theme="dark"] .number-spin-btn:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
	outline: none;
}

body[data-theme="dark"] .sarus-spinedit__btn:active,
body[data-theme="dark"] .sarus-spin__btn:active,
body[data-theme="dark"] .number-spin-btn:active {
	background: rgba(255, 255, 255, 0.14);
	color: #f4f7fc;
}