.toggleInput {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.toggle-track {
	background: white;
	border: 2px solid #000;
	border-radius: 100px;
	cursor: pointer;
	display: flex;
	height: 26px;
	position: relative;
	width: 44px;
}
.toggle-indicator {
	align-items: center;
	background: #000;
	border-radius: 24px;
	bottom: 2px;
	display: flex;
	height: 18px;
	justify-content: center;
	left: 2px;
	outline: #000;
	position: absolute;
	transition: 0.2s;
	width: 18px;
}

.iconContainer{
	display: flex;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.theme-toggle-light-icon, .theme-toggle-dark-icon {
	position: absolute;
	fill: #fff;
	height: 16px;
	width: 16px;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}
.toggleInput:checked + .toggle-track .toggle-indicator {
	background: #000;
	transform: translateX(18px);
}
.toggleInput:checked + .toggle-track .toggle-indicator .theme-toggle-dark-icon {
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}

.toggleInput:not(:checked) + .toggle-track .toggle-indicator .theme-toggle-light-icon {
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}


@media screen and (-ms-high-contrast: active) {
	.toggle-track {
		border-radius: 0;
 }
}