.toggle-checkbox {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.toggle-slot {
	position: relative;
	height: 2em;
	width: 3em;
	border: none;
	border-radius: 10em;
	background-color: white;
	transition: background-color 250ms;
}

.toggle-checkbox:checked ~ .toggle-slot {
	background-color: #374151;
}

.toggle-button {
	transform: translate(1.6em, 0.5em);
	position: absolute;
	height: 1em;
	width: 1em;
	border-radius: 50%;
	background-color: #ffeccf;
	transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
}

.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
	background-color: #485367;
	transform: translate(0.5em, 0.5em);
}

.sun-icon {
	position: absolute;
	height: 1em;
	width: 1em;
	color: #ffbb52;
}

.sun-icon-wrapper {
	position: absolute;
	height: 1em;
	width: 1em;
	opacity: 1;
	transform: translate(0.55em, 0.25em) rotate(15deg);
	transform-origin: 50% 50%;
	transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
}

.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
	opacity: 0;
	transform: translate(1.6em, 0.5em) rotate(0deg);
}

.moon-icon {
	position: absolute;
	height: 1em;
	width: 1em;
	color: white;
}

.moon-icon-wrapper {
	position: absolute;
	height: 1em;
	width: 1em;
	opacity: 0;
	transform: translate(1.6em, .5em) rotate(0deg);
	transform-origin: 50% 50%;
	transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2.5, .46, .71);
}

.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
	opacity: 1;
	transform: translate(1.85em, 0.15em) rotate(-15deg);
}