.toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 28px;
}

	.toggle-switch span:has(input[type="checkbox"]:focus) + .slider {
		/*border: 2px solid white;
		box-shadow: 4px 4px 0 0 var(--primary-colour);*/
		box-shadow: 0 0 0 5px var(--primary-colour);
	}

.toggle-switch:has(span span[disabled="disabled"]) .slider {
	cursor: not-allowed;
}

	.toggle-switch:has(span span[disabled="disabled"]) > .slider:before {
		display: none;
	}

	.toggle-switch input[type="checkbox"] {
		opacity: 0;
		width: 0;
		height: 0;
	}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background-color: #ccc;*/
	background-color: #fafafa;
	border: 1px solid #ccc;
	/*transition: .2s;*/
	border-radius: 34px;



	/*border: 2px solid #ccc;*/
	outline: solid 2px white; /* Remove default outline */
	transition: box-shadow 0.2s ease; /* Smooth transition */
}

	.slider:before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: 4px;
		bottom: 3px;
		/*background-color: #ccc;*/
		background-color: #46464d;
		transition: .4s;
		border-radius: 50%;
	}

.toggle-switch > span:has(input[type="checkbox"]:checked) + .slider {
	background-color: var(--primary-colour);
	border-color: var(--primary-colour);
}

	.toggle-switch > span:has(input[type="checkbox"]:checked) + .slider:before {
		transform: translateX(30px);
		/*background-color: var(--primary-colour);*/
		background-color: white;
	}

h4 + .toggle-switch {
	top: -0.5rem;
	margin-left: 5px;
}

h4:has(+ .toggle-switch) {
	display: inline-block;
}