/* =========================================================
   Switch
   ========================================================= */

.switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	border: 1px solid var(--zen-theme-border-strong, darkgray);
	border-radius: 9px;
}

	.switch .switch-track {
		width: 50px;
		height: 24px;
			background: var(--zen-theme-surface-muted, var(--switch-off));
		border-radius: 999px;
		position: relative;
		transition: background .2s ease;
		box-sizing: border-box;
	}

	.switch .switch-knob {
		position: absolute;
		top: 3px;
		left: 3px;
		width: 18px;
		height: 18px;
			background: var(--zen-theme-surface, var(--switch-knob));
		border-radius: 50%;
		transition: transform .2s ease;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
			border: 1px solid var(--zen-theme-border-strong, darkgray);
	}

	.switch input[type="checkbox"] {
		position: absolute;
		inset: 0;
		margin: 0;
		opacity: 0;
	}

	.switch input:checked + .switch-track {
			background: var(--zen-theme-action, var(--switch-on));
	}

		.switch input:checked + .switch-track .switch-knob {
			transform: translateX(26px);
		}

	.switch input:focus-visible + .switch-track {
			outline: 3px solid var(--zen-theme-focus, var(--switch-focus));
		outline-offset: 2px;
	}

	.switch input[disabled] + .switch-track {
			background: var(--zen-theme-disabled-bg, #e5e5e5);
		cursor: not-allowed;
	}

		.switch input[disabled] + .switch-track .switch-knob {
			opacity: .7;
		}

	.switch input[disabled] ~ .switch-label {
		opacity: .6;
		cursor: not-allowed;
	}

	.switch.switch--sm .switch-track {
		width: 36px;
		height: 18px;
	}

	.switch.switch--sm .switch-knob {
		width: 12px;
		height: 12px;
		top: 3px;
		left: 3px;
	}

	.switch.switch--sm input:checked + .switch-track .switch-knob {
		transform: translateX(18px);
	}

	.switch.switch--lg .switch-track {
		width: 64px;
		height: 32px;
	}

	.switch.switch--lg .switch-knob {
		width: 24px;
		height: 24px;
		top: 4px;
		left: 4px;
	}

	.switch.switch--lg input:checked + .switch-track .switch-knob {
		transform: translateX(32px);
	}

@media (hover:hover) {
	.switch:hover .switch-track {
		filter: brightness(0.97);
	}
}

@media (prefers-reduced-motion: reduce) {
	.switch .switch-track,
	.switch .switch-knob {
		transition: none;
			border: 1px solid var(--zen-theme-border-strong, darkgrey);
	}
}

mycheckbox {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 30px;
}

    mycheckbox .switch {
        display: inline-flex;
        align-items: center;
        width: auto;
        height: auto;
        margin: 0;
    }

    mycheckbox .switch-track {
        flex: 0 0 auto;
    }

.myCheckBoxList .switch.switch--list {
    margin: 0;
}

mycheckbox .switch {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.myCheckBox {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 30px;
}
/*
 * Un switch est un contrôle intrinsèque : le layout parent peut s'étirer,
 * pas sa piste. La spécificité volontairement supérieure protège le contrôle
 * contre les règles génériques du type `.cell > * { width: 100%; }`.
 */
label.myCheckBox.switch {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    justify-self: start;
}

label.myCheckBox.switch .switch-track {
    flex: 0 0 50px;
    width: 50px;
}

label.myCheckBox.switch.switch--sm .switch-track {
    flex-basis: 36px;
    width: 36px;
}

label.myCheckBox.switch.switch--lg .switch-track {
    flex-basis: 64px;
    width: 64px;
}